VUE2 父组件使用子组件变量&调用方法

年纪大了，随笔记录

有如下子组件：

<template>
  <div>{{ title }}</div>
</template>

<script>
export default {
  name: 'common-title',
  data () {
    return {
      title: '会飞的猪'
    }
  },
  methods: {
    async getTitle () {}
  }
}
</script>

父组件调用子组件并使用其data中的变量

<template>
  <common-title ref="common-title" /> // 重点是设置ref，名称随意
<template />
<script>
export default {
  name: 'main',
  data () {
    return  {}
  },
  methods: {}
}
<script />

使用子组件中的title变量

第一种写法：this.$refs.common-title.title
第二种写法：this.$refs['common-title'].title

调用子组件中的方法

第一种写法：this.$refs.common-title.getTitle()
第二种写法：this.$refs['common-title'].getTitle()

随笔记录