年纪大了,随笔记录
有如下子组件:
<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()
随笔记录