正常情况下都用$refs
1父组件调用子组件$children
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title-hellovuejs</title>
</head>
<body>
<!-- 父组件模板 -->
<div id ="app">
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
<button @click="btnClick">按钮</button>
</div>
<!-- 子组件模板 -->
<template id="cpn1">
<div>
我是子组件
</div>
</template>
<script src="../js/vue.js"></script>
<script>
//1、2父组件中直接创建子组件--root组件
const chen1 = new Vue({
el: '#app', //用于挂载要管理的元素
data:{//定义数据
message: '你好啊'
},
methods: {
btnClick(){
console.log(this.$children);
// this.$children[0].showMessage();
// console.log(this.$children[0].name);
for(let c of this.$children){
console.log(c.name);
c.showMessage();
}
}
},
components:{
cpn:{
template: '#cpn1',
data(){
return{
name:'我是子组件的name'
}
},
methods:{
showMessage(){
console.log('showMessage');
}
}
}
}
})
</script>
</body>
2、采用$refs方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title-hellovuejs</title>
</head>
<body>
<!-- 父组件模板 -->
<div id ="app">
<cpn></cpn>
<cpn></cpn>
<!-- $refs用到 -->
<cpn ref='aaa'></cpn>
<button @click="btnClick">按钮</button>
</div>
<!-- 子组件模板 -->
<template id="cpn1">
<div>
我是子组件
</div>
</template>
<script src="../js/vue.js"></script>
<script>
//1、2父组件中直接创建子组件--root组件
const chen1 = new Vue({
el: '#app', //用于挂载要管理的元素
data:{//定义数据
message: '你好啊'
},
methods: {
btnClick(){
// //1.$children方式
// console.log(this.$children);
// // this.$children[0].showMessage();
// // console.log(this.$children[0].name);
// for(let c of this.$children){
// console.log(c.name);
// c.showMessage();
// }
//2.$refs方式
console.log(this.$refs);
console.log(this.$refs.aaa.name);
this.$refs.aaa.showMessage();
}
},
components:{
cpn:{
template: '#cpn1',
data(){
return{
name:'我是子组件的name'
}
},
methods:{
showMessage(){
console.log('showMessage');
}
}
}
}
})
</script>
</body>