年紀(jì)大了，隨筆記錄

有如下子組件：

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

<script>
export default {
  name: 'common-title',
  data () {
    return {
      title: '會飛的豬'
    }
  },
  methods: {
    async getTitle () {}
  }
}
</script>

父組件調(diào)用子組件并使用其data中的變量

<template>
  <common-title ref="common-title" /> // 重點是設(shè)置ref，名稱隨意
<template />
<script>
export default {
  name: 'main',
  data () {
    return  {}
  },
  methods: {}
}
<script />

使用子組件中的title變量

第一種寫法：this.$refs.common-title.title
第二種寫法：this.$refs['common-title'].title

調(diào)用子組件中的方法

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

隨筆記錄