18.vue 组件之间的传值

1.子组件向父组件传参。

• 1-1.子组件向父组件中仅传递信息：子组件向父组件中传递信息的时候，注意绑定事件中"="号左右两边的方法是子组件的还是父组件的。
• 1-2.在子组件 Children 中定义 updateParent 方法触发父组件的 updateParent 方法：

<div @click="updateParent">按钮</div>
methods: {
  updateParent() {
    this.$emit('updateParent')
  }
}

• 1-3.在父组件 Parent 中定义通道，子组件发射的方法 updateParent，触发父组件的方法 parentMethod。

<Status @updateParent="parentMethod"/>
import Status from "./status";
methods: {
  parentMethod() {
    console.log("触发父组件方法")
  }
}

2.子组件向父组件传信并携带参数，父组件接收子组件的参数并添加自身的参数.

• 2-1.子组件 Children 的方法中向父组件 Parent 发射事件 updateParent 并带参数 transition。

<div @click="updateParent(transition)">按钮</div>
methods: {
  updateParent(transition) {
    this.$emit('updateParent', transition)
  }
}

• 2-2.父组件 Parent 接收其子组件 Children 传来的值，并传入新的参数 issue，向组件 Grandparent 发射事件 updateGrandParent，并带2个参数 transition 和 issue。

<Children @updateParent="updateGrandParent(issue, ...arguments)"/>
import Children from "./Children";
methods: {
  updateGrandParent() {
    this.$emit("updateGrandParent", ...arguments);
  }
}

• 2-3.组件Grandparent接收子组件Parent的传参。

<Parent @updateGrandParent="grandParent"/>
import Parent from "./parts/parent";
methods: {
  grandParent(issue, transition) {
    console.log(issue, transition);
  },
}

3.父组件传递信息给子组件：

• 3-1.父组件Parent传值value给子组件。

<Children :value="value"></Children>
import Children from './Children'
components: {
  Children
}
data() {
  return {
    value: 'parent info'
  }
}

3-2.子组件 Children 接收 value。

props: {
  value: String
}

4.eventBus兄弟组件数据传递。项目中做示例：

• 4-1.main.js 文件中在根实例 prototype 定义$bus：所有实例中都有$bus。

import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
Vue.prototype.$bus = new Vue();

• 4-2.父组件中派发一个事件：this.$bus.$emit(‘evenName’, param1, param2,…)
  示例：

<el-button @click="addClick">修改evenBus值</el-button>{{ app }}
data() {
  return {
    app: 0,
  };
},
methods: {
  addClick() {
    this.app++;
    this.$bus.$emit('addClick', this.app)
  },
},

• 4-3.子级组件监听，用$on进行监听。this.$bus.$on(‘evenName’, (param1, param2,…) => {}）
  示例：非派发的父组件中：

created() {
  this.$bus.$on("addClick", (app) => {
    this.update(app);
  });
},
methods: {
  update(value) {
    console.log(value)
  }
}

• 4-4.移除事件：由于热更新，事件可能会被多次绑定监听，或者导致内存泄漏。

this.$bus.$off('eventName');

5.$ attrs和$ listeners 传参。

• 5-1.$attrs：
• ①父组件A：

<parentSlot :grandfarther="grandfarther" />
import parentSlot from "@/pages/parentSlot";
components: {
  parentSlot,
},
data() {
  return {
    grandfarther: "我是你爷爷",
  };
},

• ②当前组件B：

<childrenSlot v-bind="$attrs" />
import childrenSlot from "./childrenSlot.vue";
components: {
  childrenSlot,
},

• ③子组件C：

props: {
  grandfarther: String
},

• 5-2.$listeners：
• ①子组件C：

data() {
  return {
    toGrandFather: '我是你孙子'
  };
},
methods: {
  addClick() {
    this.$emit('father', this.toGrandFather);
  },
},

• ②当前组件B：

<childrenSlot v-on="$listeners"/>
import childrenSlot from "./childrenSlot.vue";
components: {
  childrenSlot,
},

• ③父组件A：

<parentSlot @father="father" />
import parentSlot from "@/pages/parentSlot";
components: {
  parentSlot,
},
data() {
  return {
    app3: ""
  };
},
methods: {
  father(value) {
    this.app3 = value;
  },
},

6.provide / inject 传参：

• 6-1.一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。
• 6-2.一般用法：绑定并不是可响应的数据。

// 父级组件提供 'foo'
provide() {
  return {
    foo: 'bar'
  }
},
// 子组件注入 'foo'
inject: ['foo'],
created () {
  console.log(this.foo) // => "bar"
}

• 6-3.绑定响应式数据。无法直接修改 computed 的属性值，因为他是一个计算属性。这样就可以避免数据的混乱。
• 6-4.如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。

// 父级组件提供 'foo'
provide() {
  return {
    foo: () => this.app
  }
},
data() {
  return {
    app: 0,
  };
},
// 子组件注入 'foo'
inject: ['foo'],
computed: {
  f001() {
    return this.foo();
  },
},
watch: {
  f001(val) {
    console.log(val);
  },
},

7.$ refs获取组件实例。$ parent，$ childrenh获取当前组件的父组件和子组件。