|
一、组件通信
- 通过props向子组件传递数据
- 通过自定义事件向父组件发送消息
示例程序：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/js/vue.js"></script>
</head>
<body>
<div id="app">
<cpn :chobbies="hobbies" @btnclick="getData"></cpn>
<h1>{{message}}</h1>
</div>
<template id="cpn">
<div>
<ul>
<li v-for="item in chobbies">{{item}}</li>
</ul>
<button @click="sendData">将子组件数据传送给父组件</button>
</div>
</template>
<script>
let app = new Vue({
el:"#app",
data:{
hobbies:['篮球','羽毛球','乒乓球'],
message:""
},
methods:{
getData(index){
this.message=index;
}
},
components:{
cpn:{
template:"#cpn",
data() {
return {cmessage:'goodbye'}
},
props:{
chobbies:Array
},
methods:{
sendData(){
this.$emit("btnclick",this.cmessage)
}
}
},
}
})
</script>
</body>
</html>
二、组件访问
- 父组件通过
$children和$refs访问子组件
a. 父组件通过$children访问子组件
通过$children访问子组件，得到的是一个子组件数组，数组每个元素是一个子组件对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/js/vue.js"></script>
</head>
<body>
<div id="app">
<cpn ></cpn>
<cpn ></cpn>
<button @click="showChildern">按钮</button>
</div>
<template id="cpn">
<div></div>
</template>
<script>
let app = new Vue({
el:"#app",
data:{
hobbies:['篮球','羽毛球','乒乓球'],
message:""
},
components:{
cpn:{
template:"#cpn",
data() {
return {cmessage:'goodbye'}
},
},
},
methods:{
showChildern(){
let arr = this.$children
for (let i=0;i<arr.length;i++){
console.log(arr[i])
}
}
}
})
</script>
</body>
</html>
b. 父组件通过$refs访问子组件
通过$refs可以精确访问子组件，但是要给子组件标签加上ref属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/js/vue.js"></script>
</head>
<body>
<div id="app">
<cpn ref="aaa"></cpn>
<cpn ></cpn>
<cpn ></cpn>
<button @click="showChildern">按钮</button>
</div>
<template id="cpn">
<div></div>
</template>
<script>
let app = new Vue({
el:"#app",
data:{
hobbies:['篮球','羽毛球','乒乓球'],
message:""
},
components:{
cpn:{
template:"#cpn",
data() {
return {cmessage:'goodbye'}
},
},
},
methods:{
showChildern(){
console.log(this.$refs.aaa.cmessage)
}
}
})
</script>
</body>
</html>
- 子组件通过
$parent访问父组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/js/vue.js"></script>
</head>
<body>
<div id="app">
<cpn ></cpn>
</div>
<template id="cpn">
<div>{{cmessage}}</div>
</template>
<script>
let app = new Vue({
el:"#app",
data:{
message:"我是父组件的消息"
},
components:{
cpn:{
template:"#cpn",
data() {
return {cmessage:this.$parent.message}
},
},
},
})
</script>
</body>
</html>
|