共计 3905 个字符,预计需要花费 10 分钟才能阅读完成。
摘要:组件是 vue.js 最弱小的性能之一,这五个组件间传值场景你理解吗?
本文分享自华为云社区《你理解 Vue 组件间传值五大场景吗?》,作者:北极光之夜。。
父组件向子组件传值:
比方有一个 Father.vue 的父组件要传值给 Children.vue 的子组件,实现共需四步:
父组件 Father.vue 内容,留神外面的操作步骤:
<template>
<div>
<h2> 父组件区域 </h2>
<hr />
<!-- 第二步:在援用的子组件标签里定义 :num="num" , num 就是要传递的变量 -->
<Children :num="num"></Children>
</div>
</template>
<script>
// 引入子组件
import Children from "./Children.vue";
export default {data() {
return {
// 第一步:咱们将要把变量 num 的值传给子组件 Children
num: 666,
};
},
components: {Children,},
};
</script>
子组件 Children.vue 内容,留神外面的操作步骤:
<template>
<div>
<h2> 子组件区域 </h2>
<!-- 第四步:在子组件显示父组件传过来的值 -->
<i> 父组件传递过了的值:{{num}}</i>
</div>
</template>
<script>
export default {
// 第三步:子组件能够通过定义的 props 就能够接管来自父组件的变量值 num
props: ["num"],
data() {return {};
},
};
</script>
运行成果:
子组件向父组件传值:
比方有一个 Children.vue 的子组件要传值给 Father.vue 的父组件,实现共需六步:
子组件 Children.vue 内容,留神外面的操作步骤:
<template>
<div>
<h2> 子组件区域 </h2>
<!-- 第二步:得定义一个向父组件传值的办法,比方定义一个按钮,绑定一个点击事件,触发 giveFather 办法 -->
<button @click="giveFather">giveFather</button>
</div>
</template>
<script>
export default {data() {
return {
// 第一步:咱们将要把变量 word 的值传给父组件
word: "北极光之夜。",
};
},
methods: {
// 第三:定义子组件向父组件传值的事件办法
giveFather() {
// 第四步:能够通过 $emit 传值给父组件, 第一个参数为传值的办法,第二个参数为要传递的值
this.$emit("giveFather", this.word);
},
},
};
</script>
父组件 Father.vue 内容,留神外面的操作步骤:
<template>
<div>
<h2> 父组件区域 </h2>
<hr />
<!-- 第五步:要在援用的子组件标签里定义一个自定义事件,该自定义事件要写为子组件 $emit 的第一个参数一样,
而后双引号里的办法能够自定义,我这就为 getSon -->
<Children @giveFather="getSon"></Children>
</div>
</template>
<script>
// 引入子组件
import Children from "./Children.vue";
export default {data() {return {};
},
components: {Children,},
methods: {
// 第六步:定义获取子组件值的办法,该办法的参数就为子组件传递过去的值
getSon(temp) {
// 控制台输入看看能不能获取
console.log(temp);
},
},
};
</script>
运行成果:
兄弟组件间传值:
比方有一个 Father.vue 的父组件,它有一个 Children.vue 的子组件和一个 Son.vue 的子组件,那么,Children.vue 和 Son.vue 就是兄弟关系,当初 Children.vue 要向兄弟 Son.vue 传值:
首先在 vue 原型上定义一个新的实例,main.js 文件内容,留神外面的操作步骤:
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
// 第一步,在 vue 原型上定义一个本人的办法,个别叫 $bus,为 vue 实例
Vue.prototype.$bus = new Vue();
new Vue({render: h => h(App),
}).$mount('#app')
Children.vue 内容,留神外面的操作步骤:
<template>
<div>
<h2>Children 子组件区域 </h2>
<!-- 第三步:定义一个向兄弟组件传值的办法,比方定义一个按钮,绑定一个点击事件,触发 giveSon 办法 -->
<button @click="giveSon">giveSon</button>
</div>
</template>
<script>
export default {data() {
return {
// 第二步:咱们将要把变量 word 的值传给兄弟组件
word: "北极光之夜。",
};
},
methods: {
// 第四:定义子组件向兄弟组件传值的事件办法
giveSon() {
// 第五步:能够通过自定义的 $bus 的 $emit 传值给兄弟组件,
// 第一个参数为传值的办法,第二个参数为要传递的值
this.$bus.$emit("giveSon", this.word);
},
},
};
</script>
Son.vue 内容,留神外面的操作步骤:
<template>
<div>
<h2>Son 子组件区域 </h2>
</div>
</template>
<script>
export default {data() {return {};
},
created() {
// 第六步:通过 $on 办法进行获取兄弟传递过去的值。// 第一个参数为兄弟组件传值的办法,第二个参数是自定义的办法
this.$bus.$on("giveSon", this.getSon);
},
methods: {
// 第七步,自定义的办法, 参数就是兄弟传过来的值
getSon(temp) {
// 输入看看
console.log(temp);
},
},
};
</script>
运行成果:
总结就是,在 vue 原型上定义一个新的实例,而后采纳 emit 和 emit 和 on 这两个办法进行获取传递过去的值。
应用 Vuex 状态机传值:
Vuex 是实现组件全局状态 (数据) 治理的一种机制,能够很不便的实现组件之间数据的共享。
对于 Vuex 的具体应用,能够看这篇文章,指路👉:https://auroras.blog.csdn.net…
给后辈组件传值,provide 和 inject:
比方有一个 Father.vue 的父组件,它有一个 Children.vue 的子组件,那么这个 Children.vue 的子组件是他的后辈。而若 Children.vue 也有一个子组件 grandSon.vue,那么 grandSon.vue 就相当于 Father.vue 的孙子组件,同样,grandSon.vue 也会是 Father.vue 的后辈。以此类推,它的孙子,孙子的孙子等等都是它后辈。当初咱们实现 Father.vue 给它的后辈 grandSon.vue 孙子组件传值:
父组件 Father.vue 内容,留神外面的操作步骤:
<template>
<div>
<h2> 父组件区域 </h2>
<hr />
<Children></Children>
</div>
</template>
<script>
// 引入子组件
import Children from "./Children.vue";
export default {data() {
return {
// 第一步:定义一个变量,咱们将要把变量 num 的值传给后辈组件 grandSon.vue
num: "北极光之夜",
};
},
// 第二步,定义一个 provide 函数
provide() {
// 第三步,如下定义,给后辈接管
//giveAfter 名称为本人定义,任意起,this 固定写法
return {giveAfter: this,};
},
components: {Children,},
};
</script>
子组件 Children.vue 内容,没什么,引入子组件就行:
<template>
<div>
<h2>
Children 子组件区域
<hr />
<Grand-son></Grand-son>
</h2>
</div>
</template>
<script>
// 引入子组件
import GrandSon from "./GrandSon.vue";
export default {data() {return {};
},
components: {GrandSon,},
};
</script>
孙子组件 GrandSon.vue 内容,留神外面的操作步骤:
<template>
<div>
GrandSon 孙子组件区域
<!-- 第六步:展现数据 -->
<i> {{num}}</i>
</div>
</template>
<script>
export default {
// 第四步:定义 inject, 外面写先人组件自定义的名称
inject: ["giveAfter"],
data() {
return {
// 第五步:获得先人组件传的值,this.giveAfter. 要传递值的变量名
// 赋值给 num
num: this.giveAfter.num,
};
},
};
</script>
看运行成果,胜利获取:
点击关注,第一工夫理解华为云陈腐技术~