<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>父组件访问子组件,使用$children(用的比较少)或$refs(引用);</p>
<p>子组件访问父组件:使用$parent(父亲);</p>
<div id="app">
<cpn ref="aaa"></cpn>
<button @click="btnClick()">按钮</button>
</div>
<template id="cpn">
<div>
我是子组件
</div>
</template>
</body>
</html>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好',
},
components:{
cpn:{
template:'#cpn',
data(){
return{
name:'我是子组件name'
}
},
methods:{
showMessage(){
console.log('showMessage');
}
}
}
},
methods:{
btnClick(){
console.log(this.$refs.aaa.name);
}
},
})
</script>
vue父子组件访问方法
$refs ={},对象类型,默认为空。