16-父访问子组件
父访问子组价有两种方法,一是children 另一种是
r
e
f
s
,
但
是
我
们
在
平
常
开
发
中
,
使
用
最
多
的
是
refs,但是我们在平常开发中,使用最多的是
refs,但是我们在平常开发中,使用最多的是refs,因为
r
e
f
s
使
用
方
便
,
则
refs使用方便,则
refs使用方便,则children的最大用处就是访问全体的子组件.
为什么没有子访问父呢?因为子直接访问父,会出现很多问题,一般我们会直接使用子传父。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js/vue.min.js"></script>
</head>
<body>
<div id="app">
{{message}}
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
<cpn ref='aaa'></cpn> <!-- 常用$refs 拿到单独的子组件 -->
<button @click="btnclick">按钮</button>
</div>
<template id="temone">
<div>你好,我是子组件</div>
</template>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好VUE'
},
methods:{
btnclick(){
//$children 拿到全部的组件比较常用
// console.log(this.$children);
// this.$children[0].showMessage()
// for (let c of this.$children){
// console.log(c.name);
// c.showMessage()
///}
console.log(this.$refs.aaa.name) //常用$refs 拿到单独的子组件
}
},
components:{
cpn:{
template:'#temone',
data(){
return{
name:'我是子组件的name'
}
},
methods:{
showMessage(){
console.log('showMessage')
}
}
}
}
})
</script>
</body>
</html>