<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<mycpn ref="myc"></mycpn>
<mycpn></mycpn>
<button @click="btn">点击</button>
</div>
<template id="cpn">
<div>我是子组件</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
methods:{
btn(){
console.log( this.$refs.myc.show());
console.log( this.$refs);
}
},
//子组件
components:{
mycpn:{
template:'#cpn',
data(){
return{
name:"小明"
}
},
methods:{
show(){
console.log("这是子组件的方法!");
}
}
},
}
})
</script>
</body>
</html>
this.$children和this.$refs的区别
this.$children获取的是此父组件下所有子组件的对象;
this.$refs获取的是ref为myc的组件的对象
如果想获取组件ref为myc子组件对象下的name
直接this.$refs.myc.name即可。
如果想获取组件ref为myc子组件对象下的方法
直接this.$refs.myc.方法名即可。
注意:子组件中的data必须是方法。如下
data(){
return {
属性名:属性值
}
}