<div> <parent-component></parent-component> </div> <template> <div> <h3>我是父组件</h3> <div> <button @click="getData1">获取子组件c1的数据</button> <p>{{msg1}}</p> </div> <div> <button @click="getData2">获取子组件c2的数据</button> <p>{{msg2}}</p> </div> <child-component1 ref="c1"></child-component1> <child-component2 ref="c2"></child-component2> </div> </template> <template> <div> <h3>我是子组件1</h3> <input v-model="msg"> <p>{{msg}}</p> </div> </template> <template> <div> <h3>我是子组件2</h3> <input v-model="msg"> <p>{{msg}}</p> </div> </template>
<script> // 注册 Vue.component('parent-component', { template: '#parent-component', data(){ return{ msg1:'', msg2:'', } }, methods:{ getData1(){ this.msg1 = this.$refs.c1.msg; }, getData2(){ this.msg2 = this.$refs.c2.msg; }, }, components:{ 'child-component1':{ template:'#child-component1', data(){ return{ msg:'', } }, }, 'child-component2':{ template:'#child-component2', data(){ return{ msg:'', } }, }, } }) // 创建根实例 new Vue({ el: '#example', }) </script>
总结
虽然vue提供了以上方式对组件实例进行直接访问，但并不推荐这么做。这会导致组件间紧密耦合，且自身状态难以理解，所以尽量使用props、自定义事件以及内容分发slot来传递数据。
您可能感兴趣的文章: