vue中父子传值 通过provide inject 进行父子间传值
定义说明provide 和 inject 这是一起搭配使用的。他是允许一个父组件向所有子孙后代进行传值，不论组件层级有多深，都可以进行传值。 通俗的说：组件引入的层级过多，我们子组件像要获取父组件的数据，按照平常我们的做法就是有一级一级网上寻找，直到找到父级获取父级数据，这样一级一级套的很麻烦，同时也会在一级一级找的过程中造成混乱，所以provide和inject就能实现直接获取父级数据。
provide： 是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。
inject： 一个字符串数组，或者是一个对象。属性值可以是一个对象，包含from和default默认值。
【app.vue】
<template>
<div>
<!-- 通过v-mode 传入值到子组件 -->
<!-- 子组件要修改父组件数据 直接发射input事件以及传参 -->
<!-- 子组件的标签上会自动监听input事件 并且在事件中修改数据 -->
<son v-model="myage"></son>
</div>
</template>
<script>
import son from "@/components/son";
export default {
components: {
son,
},
data() {
return {
myage: 18,
};
},
//provide用来想下面的子组件传递数据
provide() {
return {
myname: "xh",
};
},
};
</script>
<style>
</style>
【son.vue】
<template>
<div>
我是子组件{{ myname }}
<!-- v-model 会保存 单向数据流 -->
<!-- <input type="text" v-model="value" @blur="fn" /> -->
<input type="text" :value="value" @blur="fn" />
<button @click="fn2">按钮</button>
<grandson></grandson>
</div>
</template>
<script>
import grandson from "@/components/grandson";
export default {
created() {
// this.$on("myevent", function () {
// alert("我是自己事件被触发了");
// });
this.$parent.$on("parentevent", function () {
alert("父亲事件被触发了");
});
},
components: { grandson },
inject: ["myname"],
props: ["value"],
methods: {
fn(e) {
this.$emit("input", e.target.value);
},
fn2() {
// this.$emit("myevent");
//在子组件点击按钮 让父组件 法神自定义事件并监听自己的自定义事件
this.$parent.$emit("parentevent");
},
},
};
</script>
<style>
</style>
【grandson.vue】
<template>
<div>我是二儿子{{ myname }}</div>
</template>
<script>
export default {
inject: ["myname"],
};
</script>
<style>
</style>
总结：在app.vue组件中引用son.vue[import son from "@/components/son";] 在template中调用在son.vue中引入[import grandson from "@/components/grandson";]son和grandson中引入inject: ["myname"],gtangson中能在app.vue中显示调用的myname：xh
通v-model传入值到子组件中，子组件要修改父组件数据，直接发射input 事件以及传参，子组件的标签上会自动监听input事件 并且在事件中修改数据
