正文
【vue】中 $parent 和 $children 的使用方法
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<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
