我们知道 父子组件之间的通讯 很烦对吧,所以现在有新方法:
父组件直接访问子组件中的对象:
2种方法 : 1: $children,2: $refs
有以下代码:
<body>
<template id="cpn">
<div>不断奋起,直到羔羊变雄狮。</div>
</template>
<div id="app">
<v-cpn></v-cpn>
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
components:{
'v-cpn':{
template:"#cpn",
methods:{
show(){
console.log("cpn子标签 - show方法");
}
}
}
}
})
</script>
所以我们先尝试打印 this.$children 看下出来什么:
加个button ,然后点击时候 打印 即:
<body>
<template id="cpn">
<div>不断奋起,直到羔羊变雄狮。</div>
</template>
<div id="app">
<v-cpn></v-cpn>
<!-- 这里加Button 然后点击事件父组件中打印 this.$children -->
<button @click="showChildren">点击查看$children</button>
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
methods:{
showChildren(){
console.log(this.$children);
}
}, components:{
'v-cpn':{
template:"#cpn",
methods:{
show(){
console.log("cpn子标签 - show方法");
}
}
}
}
})
</script>
View Code
点击后:
他是有很多很多个,数组来的,因为他可以有很多个 子组件
你要获取可以这样: this.$children[x] x代表下标,当然 从0 开始。
一看到是下标 你立马要想到什么? 想到 循环遍历对吧 啊哈哈。
里面包含了 子组件的所有,最典型的就是data 和 method 了 或 其他,下面演示:
<body>
<template id="cpn">
<div>不断奋起,直到羔羊变雄狮。</div>
</template>
<div id="app">
<v-cpn></v-cpn>
<!-- 这里加Button 然后点击事件父组件中打印 this.$children -->
<button @click="cpn_data_s1">点击查看子组件v-cpn的 data-s1</button>
<button @click="cpn_method_show">点击触发子组件v-cpn的 show方法</button>
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
methods:{
cpn_data_s1(){
console.log(this.$children[0].s1); //你看 贼方便
}, cpn_method_show(){
this.$children[0].show(); //你看 贼方便
}
},
components:{
'v-cpn':{
template:"#cpn",
data(){
return{s1:"举杯祝福后都走散"}
},
methods:{
show(){
console.log("cpn子标签 - show方法");
}
}
}
}
})
</script>
View Code
非常的方便啊
上面写死是 [0] 当然你可以用循环遍历遍历全部的子组件中的值。
现在讲讲$children的缺陷:
通过$children访问子组件时,是一个数组类型,访问其中的子组件必须通过索引值。【但这个可以用遍历是一个优点哦】
但是当子组件过多,我们需要拿到其中一个时,往往不能确定它的索引值,甚至还可能会发生变化。【主要是这个 如果子组件变化 那么下标变化 很容易出BUG!】
那么就有了第二种写法:
我们想明确获取其中一个特定的组件,这个时候就可以使用$refs
$refs的使用:
$refs和ref指令通常是一起使用的。
首先,我们通过ref给某一个子组件绑定一个特定的ID。 其次,通过this.$refs.ID就可以访问到该组件了。
用法例子:
<body>
<template id="cpn">
<div>不断奋起,直到羔羊变雄狮。</div>
</template>
<div id="app">
<v-cpn ref="ref1"></v-cpn> <!--在子组件这使用ref属性即可-->
<button @click="cpn_data_s1">点击查看 子组件 v-cpn 的data-s1</button>
<button @click="cpn_method_show">点击触发 子组件 v-cpn 的methods-show()</button>
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
methods:{
cpn_data_s1(){
console.log(this.$refs.ref1.s1); //你看 贼方便
}, cpn_method_show(){
this.$refs.ref1.show(); //你看 贼方便
}
},
components:{
'v-cpn':{
template:"#cpn",
data(){
return{s1:"举杯祝福后都走散"}
},
methods:{
show(){
console.log("cpn子标签 - show方法");
}
}
}
}
})
</script>
View Code
真的 太方便了啊!!!!
最后 这里父组件 直接访问 子组件的对象 就完了,果然 之前学的想放弃的父子组件通讯VUE 还是会留住用户的 啊哈哈哈!
作者:咸瑜