vue组件之组件间的通信
1.组件之间的通信
参考链接：https://www.cnblogs.com/xiaonq/p/9685234.html
https://www.cnblogs.com/lingdu87/p/9147555.html#top
1.1 父组件向子组件间的通信
1、组件间的通信说明
1. 组件间通信就是指组件之间是如何传递数据的
父组件：vue实例化对象
子组件：自定义组件
2. 组件的tempalte属性，除了可以是字符串，还可以是元素的id
3. 我们在页面中定义模板的时候，除了可以定义在script模板标签中，还可以定义在template模板中
父组件子组件：如果你在一个组件A里面，用到了另外一个组件B，那么B就是A的子组件，A就是B的父组件
2、父组件向子组件通信：分为以下两步
1. 第一步
1. 在组件容器元素上，定义自定义属性，属性值可以传递父组件中的数据
2. 如果属性使用了v-bind指令，属性值就是js环境
3. 如果属性没有使用v-bind指令，属性值就是字符串
2. 第二步
1. 在组件中定义props属性，属性值是数组，每一个成员代表组件容器元素上的一个属性
2. 作用：将属性作为变量，注册在子组件中，可以在子组件中使用（包括模板）
3. 注意: 如果属性名称，出现了-， 注册的变量要使用驼峰式命名法
3、例子说明
- 在当页面中注册了子组件：Ickt，在子组件中是无法使用父组件中定义的数据 msg 的
- 如果想要在子组件Ickt中使用父组件的 msg 变量，可以使用 <ickt v-bind:parent-msg="msg">
- 在子组件中 使用{{parent-msg}} 就可以访问父组件的msg变量了
父组件代码如下：
<template>
<div>
<h2>{{ msg }}</h2>
<!--3.第三步：把父组件的某一个属性传递给子组件 psMsg是名字-->
<son :psMsg="父传子的内容:我是父组件"></son> <!-- 子组件绑定psMsg变量-->
</div>
</template>
<script>
import son from './Son' //1.第一步 在父组件中引入子组件
export default {
name: 'HelloWorld',
data () {
return {
msg: '父组件',
}
},
//2.第二步：在父组件中注册子组件
components:{son},
}
</script>
子组件的代码如下：
<template>
<div class="son">
<p>{{ sonMsg }}</p>
<p>子组件接收到内容：{{ psMsg }}</p>
</div>
</template>
<script>
export default {
name: "son",
data(){
return {
sonMsg:'子组件',
}
},
//子组件要使用父组件的数据，只需要一步，在props中接收父组件的属性
props:['psMsg'], // 接收父组件传来的psMsg值
}
</script>
1.2 子组件向父组件通信
1、1.0中子组件向父组件通信分以下两步
1. 第一步：注册事件
在父组件的events属性中 注册消息，参数就是触发是传递的数据，作用域是组件实例化对象
2.第二步：触发事件
在子组件中，通过$dispatch方法触发消息
2、2.0中改变
-
将$dispatch, \(broadcast 移除了，新增了\)emit, $on, $off
$emit发布消息
\(on 注册消息： 参数就是\)emit传递的数据，作用域就是组件实例化对象
$off 注销消息
-
每一个组件相当于一个事件对象，只能在自身订阅，触发，以及发布
-
注意：工作中，注册事件通常在组件生命周期方法中注册，例如created
父组件代码如下：
<template>
<div class="parent">
<h2>{{ msg }}</h2>
<p>父组件接手到的内容：{{ username }}</p>
<!--把父组件的一个方法传递给子组件-->
<son psMsg="父传子的内容:叫爸爸" @transfer="getUser"></son> <!--绑定自定义事件transfer-->
</div>
</template>
<script>
import son from './Son' //1.第一步 在父组件中引入子组件
export default {
name: 'HelloWorld',
data () {
return {
msg: '父组件',
username:'',
}
},
components:{son}, //2.第二步：在父组件中注册子组件
methods:{
//3.第三步：在父组件中定义一个getUser方法 可以在子组件中触发并传值给父组件
getUser(msg){ //msg是接收的子组件中传递的数据
this.username= msg
}
}
}
</script>
子组件son代码如下：
<template>
<div class="son">
<p>{{ sonMsg }}</p>
<p>子组件接收到内容：{{ psMsg }}</p>
<!--<input type="text" v-model="user" @change="setUser">-->
<button @click="setUser">传值</button>
</div>
</template>
<script>
export default {
name: "son",
data(){
return {
sonMsg:'子组件',
user:'子传父的内容'
}
},
props:['psMsg'],
methods:{
setUser:function(){
this.$emit('transfer',this.user)//将值绑定到transfer上传递过去
}
}
}
</script>
1.3通过Vuex状态管理传值
1.通过npm加载vuex，创建store.js文件，然后在main.js中引入，store.js文件代码如下:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const state = {
author:'Wise Wang'
};
const mutations = {
newAuthor(state,msg){
state.author = msg
}
}
export default new Vuex.Store({
state,
mutations
})
2.父组件parent代码如下：
<template>
<div class="parent">
<h2>{{ msg }}</h2>
<p>父组件接手到的内容：{{ username }}</p>
<input type="text" v-model="inputTxt">
<button @click="setAuthor">传参</button>
<son psMsg="父传子的内容:叫爸爸" @transfer="getUser"></son>
</div>
</template>
<script>
import son from './Son'
export default {
name: 'HelloWorld',
data () {
return {
msg: '父组件',
username:'',
inputTxt:''
}
},
components:{son},
methods:{
getUser(msg){
this.username= msg
},
setAuthor:function () {
this.$store.commit('newAuthor',this.inputTxt)
}
}
}
</script>
3.子组件son代码如下：
<template>
<div class="son">
<p>{{ sonMsg }}</p>
<p>子组件接收到内容：{{ psMsg }}</p>
<p>这本书的作者是：{{ $store.state.author }}</p>
<!--<input type="text" v-model="user" @change="setUser">-->
<button @click="setUser">传值</button>
</div>
</template>
<script>
export default {
name: "son",
data(){
return {
sonMsg:'子组件',
user:'子传父的内容'
}
},
props:['psMsg'],
methods:{
setUser:function(){
this.$emit('transfer',this.user)
}
}
}
</script>
