<div id="app"> A{{msg}} <my-button :msg="msg"></my-button> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.7/vue.common.dev.js"></script> <script> let vm = new Vue({ el: ‘#app‘, data: { msg: ‘100‘ }, mounted () { console.log(this.$parent, ‘父‘) // 没有父组件 console.log(this.$children, ‘子‘) // 99组件 }, components: { ‘MyButton‘: { template: `<div>B<my-radio></my-radio></div>`, data () { return { msg: ‘99‘ } }, mounted () { console.log(this.$parent, ‘父‘) // 100组件 console.log(this.$children, ‘子‘) // 88组件 }, components: { ‘MyRadio‘: { template: `<div>C</div>`, data () { return { msg: ‘88‘ } }, }, }, }, } }) </script>
$children 官方介绍：
当前实例的直接子组件。需要注意 $children 并不保证顺序，也不是响应式的。如果你发现自己正在尝试使用 $children 来进行数据绑定，考虑使用一个数组配合 v-for 来生成子组件，并且使用 Array 作为真正的来源。
$parent 官方介绍：
当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。
既然可以获取到组件的实例，那么就可以调用组件的属性或是方法进行操作
<div id="app"> A{{msg}} <my-button :msg="msg"></my-button> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.7/vue.common.dev.js"></script> <script> let vm = new Vue({ el: ‘#app‘, data: { msg: ‘100‘ }, methods: { handleClick () { console.log(‘点击事件‘) this.$children.forEach(child => { child.todo() }) } }, components: { ‘MyButton‘: { template: `<div @click="$parent.handleClick">B</div>`, data () { return { msg: ‘99‘ } }, methods: { todo () { console.log(‘todo事件‘) } }, }, } }) </script>
$children 是一个数组，是直接儿子的集合，关于具体是第几个儿子，那么儿子里面有个 _uid 属性，可以知道他是第几个元素，是元素的唯一标识符，根据这个属性，我们可以进行其他的操作
关于父子通讯的方式有很多种，那么其中就包含了$parent 和 $children
【vue】中 $parent 和 $children 的使用方法
原文：https://www.cnblogs.com/wuxianqiang/p/10472972.html