vue父组件向子组件进行传值 父组件用$children主动获取子组件的属性方法
父组件向子组件进行传值父组件:<template><div><h2>我是父组件:</h2><div><input v-model="parementMsg"/></div><div><!-...
·
父组件:
<template>
<div>
<h2>我是父组件:</h2>
<div>
<input v-model="parementMsg">
</div>
<div>
<!-- 3.向子组件 传参 -->
<Child2 :fromParentMsg="parementMsg"></Child2>
<button @click="parent_child_fun">调用子组件的方法</button>
</div>
</div>
</template>
<script>
// 1.引入子组件
import Child2 from "@/components/Child2"
export default {
data() {
return {
parementMsg: ''
}
},
mounted() {
// $children 是一个数组 获取子组件的属性
console.log(this.$children[0].child_msg)
// 获取子组件的方法
console.log(this.$children[0].child_fun())
},
methods: {
parent_child_fun() {
this.$children[0].child_fun()
}
},
// 2.在父组件中注册
components: {
Child2
}
}
</script>
子组件:
<template>
<div>
这是子组件的内容-来自父组件:{{fromParentMsg}}
</div>
</template>
<script>
export default {
// props 接受父组件传递的值
props:['fromParentMsg'],
data() {
return {
child_msg:"这是child的msg"
}
},
methods:{
child_fun(){
alert('23452344')
}
}
}
</script>
<style scoped>
</style>
$children 他返回的是一个组件集合,如果你能清楚的知道子组件的顺序,你也可以使用下标来操作;
父组件通过$children获取子组件的方法 如下图:
更多推荐
已为社区贡献7条内容
所有评论(0)