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>