vue 父子组件通信
一.原理
二.父传子
使用父传子步骤如下
- 写父组件
- 写子组件
- 在子组件里，用
props属性，新进到这个里面的属性就可以当本省的属性来用 - 在父组件里写入子组件，并且用类似于属性的功能，把数据给他穿进去
<div id="app">
<cpn :cmovies="message" :cmessage="movies"></cpn>
</div>
<div id="app">
<cpn :cmovies="movies" :cmessage="message"></cpn>
</div>
<template id="cpn">
<div>
<p>{{cmovies}}</p>
<p>{{cmessage}}</p>
</div>
</template>
<script>
const cpn = {
template: '#cpn',
data() {
return {}
},
props: ["cmovies", 'cmessage'], // 可以是数组，也可以是对象，
}
const app = new Vue({
el: '#app',
data: {
message: "你好",
movies: ['海王', '海贼王', '海尔兄弟'],
},
components: {
cpn
}
})
</script>
三.子传父
- 子组件里定义方法
- 触发子组件的方法，把子组件里再触发
$emit方法 - 父组件里使用
@son=“butclick” - 通过父组件的这个方法，把子组件传过来的数据给打印出来。
要通过事件来传值。
<body>
<div id="app">
<!-- 这个时候，参数的是可以省略的 -->
<cpn @sonclick="cpnClick"></cpn>
</div>
<template id="cpn">
<div>
<button v-for="item in categories" @click="btnclick(item)">{{item.name}}</button>
</div>
</template>
<script>
const cpn = {
template: "#cpn",
data() {
return {
categories: [{
id: "a",
name: "热门推荐"
},
{
id: "b",
name: "手机数码"
},
{
id: "c",
name: "电脑办公"
}
]
}
},
methods: {
btnclick(item) {
this.$emit("sonclick", item);
}
}
}
const app = new Vue({
el: "#app",
data: {
message: "你好",
},
components: {
cpn
},
methods: {
cpnClick(item) {
console.log(item.name);
},
}
})
</script>
</body>
