父子之间
父传子
props
子传父
通过props传递过来的方法名 $emit('方法名',参数) 子组件通过参数传递给父
//子组件
<button @click="send2"></button>
methods:{
send2(){
this.$emit('send',"子组件像父组件传值",true)
}
}
//父组件
<p v-on:send="b"></p>
methods:{
b:function(data,data2){
console.log(data,data2);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 组件通信：父子、兄弟、跨级
父传子：props
子传父：$emit
-->
<!-- 子传父：自定义事件
js的观察者模式：dispatchEvent,addEventListener
子组件用$emit()来触发事件，父组件用$on()来监听子组件的事件
-->
<!-- 父组件也可直接在子组件的自定义标签上使用v-on来监听子组件触发的自定义事件
即：父利用v-on监听子组件触发的自定义事件
-->
<div id="app">
<p>总数:{{total}}</p>
<my-component
@increase="handleGetTotal"
@reduce="handleGetTotal"
></my-component>
<!--
除了用v-on在组件上监听自定义事件，也可以监听DOM事件，
用.native修饰符监听一个原生事件，监听该组件的根元素
如何使用的
-->
<!-- <my-component v-on:click.native="handleClick"></my-component> -->
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
Vue.component('my-component',{
props:[],
template: `<div>
<button @click="handleIncrease">+1</button>|
<button @click="handleReduce">-1</button>|
</div>`,
data:function(){
return {
counter: 0
}
},
methods: {
handleIncrease: function(){
this.counter++;
this.$emit('increase',this.counter);
},
handleReduce: function(){
this.counter--;
this.$emit('reduce',this.counter);
//此处的reduce用于html中的@reduce
// $emit(自定义事件的名称，要传递的数据（0或多个）)
}
}
});
var app = new Vue({
el: '#app',
data: {
total: 0
},
methods: {
handleGetTotal:function(total){
this.total = total;
}
}
})
</script>
</body>
</html>
子孙之间
Provide/inject
cn.vuejs.org/v2/api/?#pr… provude和inject用于开发高阶组件/组件库中使用，不推荐用于普通应用程序代码中
一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深。
- provide应该是一个对象或返回一个对象的函数。
- inject选项可是
- 字符串数组
- 一个对象，对象的key是本地的绑定名，value是：
注：provide和inject绑定的并不是可响应的。但如果传入了一个可监听的对象，则其对象的属性是可响应的。
//父组件提供'foo'
var Provider = {
provide:{
foo:'bar'
},
}
//子组件注入'foo'
var Child = {
inject:['foo'],
created(){
console.log(foo);//bar
}
}
provide/inject结合symbol
const s = Symbol();
const Provider = {
provide(){
reutrn {
[s]:'foo'
}
}
}
const Child = {
inject:{s},
}
接下来 2 个例子只工作在 Vue 2.2.1 或更高版本。低于这个版本时，注入的值会在 props 和 data 初始化之后得到。 使用一个注入的值作为一个属性的默认值：
const Child = {
inject:['foo'],
props:{
bar:{
default(){
return this.foo
}
}
}
}
使用一个注入的值作为数据入口：
const Child = {
inject:['foo'],
data(){
return {
bar:this.foo
}
}
}
在 2.5.0+ 的注入可以通过设置默认值使其变成可选项：
const Child = {
inject: {
foo: { default: 'foo' }
}
}
如果它需要从一个不同名字的属性注入，则使用 from 来表示其源属性：
const Child = {
inject: {
foo: {
from: 'bar',
default: 'foo'
}
}
}
与 prop 的默认值类似，你需要对非原始值使用一个工厂方法：
const Child = {
inject: {
foo: {
from: 'bar',
default: () => [1, 2, 3]
}
}
}
其他
父组件中转
<div>
<h2></h2>
<h3></h3>
</div>
需求：h2传递给h3 h2用$emit传递给div，div在使用v-bind传递给h3
Bus中央事件总线
<div>
<h2></h2>
<h3></h3>
</div>
//Bus.js
import Vue from 'Vue';
export default new Vue;
//h2
<button @click="send">点击按钮h2向h3传递</button>
import Bus from './api/Bus';
export default {
data(){
return {
a:2
};
},
methods:{
send(){
//Bus存数据:$emit
Bus.$emit("send",this.a;"子组件像父组件传值");
}
}
}
//h3
import Bus from './api.Bus';
export default {
data(){
return {
b:'',
c:''
};
},
created(){
//Bus取数据:$on
Bus.$on('send',(val,val2)=>{
this.b=val;
this.c=val2
});
}
}
