1:常用的是props和$emit的方式来处理,也是最常用的方式
a:父组件传值到子组件
父组件
<parent>
<child :message="msg"></child>
</parent>
data(){
return {
msg: "this is parent message"
}
}
子组件
<div>
<p>{{message}}</p>
</div>
data(){
//两种方式都可以
//props:["message"]
props:
message: {
type: String, //可指定接收类型,如:Array.
default:"this is default" //可设置默认值
}
}
}
b:父组件传值到子组件
子组件
<template>
<button @click='setValue'>setValue</button>
</template>
data(){
return {
value: "sendValue"
}
},
methods:{
setValue:function(){
this.$emit('getdata',this.value); //this.value为向父组件传递的数据
}
}
父组件
<div id="app">
<child @getdata="receive" ></child> //自动监听由子组件"注册"的 'getdata'事件,然后调用receive方法来更改数据
<p>{{value}}</p>
</div>
data(){
return{
value:"default"
}
},
methods: {
receive:function(val) {
this.value = val;
}
}
PS:以上的方式只能用于父子组件之间的传值,如果是父组件传递给孙子组件的话,那么就需要父组件吧值传递给子组件,然后通过子组件吧值传递给孙子组件,反之也是这样
2:非父子组件之间的通讯
a: 在简单的场景之下,我们可以通过使用一个空的vue实例来做一个中转站来进行数据的发送和接受
创建一个中转文件 event.js
import Vue from 'vue'
var bus = new Vue() //创建事件"中转站"
export default bus
a.vue
<button @click="btnclick">content</button >
// 触发组件 A 中的事件
import eventdata from '../event.js'
methods: {
btnclick(){
eventdata.$emit('transfer',this.message);
}
}
b.vue
// 在组件B监听事件
<template>
<div>{{message}}</div>
</template>
import eventdata from '.../event.js'
data(){
return{
message:"default"
}
},
created() {
eventdata.$on('transfer', function(msg){ //接收事件
this.message = 'msg';
});
}
b : vuex 但是这种方式就暂时不贴代码了
3:provide/inject
这对选项允许一个祖先组件向其所有子孙后代组件注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。也就是说,在父组件只要声明了provide
,在其子组件,孙组件,曾孙组件等能形成上下游关系的组件中交互,无论多深都能通过inject
来访问provider
中的数据。而不是局限于只能从当前父组件的prop
属性来获取。注意他只做祖先通后代的单向传递的一个办法
缺点:官网不建议在应用中直接使用该办法,理由很直接:他怕你"管不好"
PS:provide
和inject
绑定并不是可响应的,这是刻意为之,然而如果你传入了一个可监听的对象,那么气对象的属性还是可监听的。
- provide 提供变量:
Object | () => Object
- inject 注入变量:
Array<string> | { [key: string]: string | Symbol | Object
provide
选项应该是一个对象或返回一个对象的函数。 该对象包含可注入其子孙的属性。在该对象中,它支持ES6中Symbol
作为key
,但只在原生支持等环境下可工作。-
inject
选项可以是 - 一个字符串数组
- 一个对象,
key
为本地绑定名,value
为:- 在可用的注入内容中搜索用的
key
,或 - 一个对象,其
from
属性是在可用的注入内容中搜索用的key
,default
属性是降级情况下使用的value
- 在可用的注入内容中搜索用的
父组件
<template>
<div>
<son></son>
</div>
</template>
<script>
import Son from "./son"
export default {
name: 'Father',
components: { Son },
// provide选项提供变量 两种方式
//provide: {
// message: this.title,
// message1:'asdafdsd'
//},
provide () {
return { TabsInstance: this };
},
data () {
return {
title: '父组件'
}
},
methods: { ... }
}
</script>
子组件不接受任何父组件的数据
孙子组件
<template>
<div>
<p>message:{{ message }}</p>
</div>
</template>
<script>
export default {
name: "GrandSon",
inject: [ "message" ],
data () {
return {
title: '孙组件'
}
},
methods: { ... }
};
</script>
provide给数据,inject接受数