<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>父组件访问子组件,使用$children(用的比较少)或$refs(引用);</p>
<p>子组件访问父组件:使用$parent(父亲);</p>
<div id="app">
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h2>我是子组件</h2>
<button @click="btnClick()">子组件按钮</button>
</div>
</template>
</body>
</html>
<script src="../vue.js"></script>
<!-- <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',
methods:{
//访问父组件
btnClick(){
//访问父组件的$parent,这里只能访问其上一级的组件
console.log(this.$parent)
//访问根组件$root
console.log(this.$root)
}
}
}
},
methods:{
},
})
</script>
08-24
08-24