vue元件傳值的方法：1、父向子傳值使用props；2、子向父傳值使用「$emit」；3、使用EventBus或Vuex進行兄弟傳值；4、使用“provide/inject”或“$attrs/$listeners”方法進行跨級傳值。
本教學操作環境：windows7系統、vue3版、Dell G3電腦。
我們都知道 Vue 作為一個輕量級的前端框架，其核心就是元件化開發。 Vue 就是由一個一個的組件所構成的，而組件化是它的精髓，也是最強大的功能之一。而元件實例的作用域是相互獨立的，這意味著不同元件之間的資料無法相互引用。
但在實際專案開發過程中，我們需要存取其他元件的數據，這樣就就有了元件通訊的問題。在 vue 中組件之間的關係有：父子，兄弟，隔代。針對不同的關係，怎麼實現資料傳遞，就是接下來要講的。
#即父元件透過屬性的方式向子元件傳值，子元件透過props來接收。
在父元件的子元件標籤中綁定自訂屬性
// 父组件
<user-detail :myName="name" />
export default {
components: {
UserDetail
}
......
}在子元件中使用props（可以是陣列也可以是物件）接收即可。可以傳多個屬性。
// 子组件
export default {
props: ['myName']
}
/*
props: { myName: String } //这样指定传入的类型，如果类型不对会警告
props: { myName: [String, Number] } // 多个可能的类型
prosp: { myName: { type: String, requires: true } } //必填的的字符串
props: {
childMsg: {
type: Array,
default: () => []
}
} // default指定默认值
如果 props 验证失败，会在控制台发出一个警告。
*/子元件接收的父元件的值分為引用型別和普通型別兩種：
# 普通型別：字串（String）、數字（Number）、布林值（Boolean）、空（Null）
參考類型：陣列（Array）、對象（Object）
如果傳過來的值是簡單資料類型，是可以在子元件中修改，也不會影響其他兄弟元件內同樣呼叫了來自該父組件的值。
具體操作是可以先把傳過來的值重新賦值給data中的一個變量，然後再更改那個變數。
// 子组件
export default {
props: ['myName'],
data() {
return {
name : this.myName // 把传过来的值赋值给新的变量
}
},
watch: {
myName(newVal) {
this.name = newVal //对父组件传过来的值进行监听，如果改变也对子组件内部的值进行改变
}
},
methods: {
changeName() {
this.name = 'Lily' // 这里修改的只是自己内部的值，就不会报错了
},
}
}註：#如果不使用watch 來監聽父元件傳遞的myName 值，子元件中的name 值是不會隨著父元件的myName 值改變，因為data 中name: this.myName 只是只定義了一個初始值。
如果引用類型的值，當子元件中修改後，父元件的也會修改，因其資料是公用的，其他同樣引用了該值的子元件也會跟著被修改。可以理解成父元件傳遞給子元件的值，就等於複製了一個副本，這個副本的指標還是指向父元件中的那個，也就是共用同一個引用。所以除非有特殊需要，否則不要輕易修改。
#1、子元件綁定一個事件，透過this.$emit() 來觸發
在子元件中綁定一個事件，並給這個事件定義一個函數
// 子组件
<button @click="changeParentName">改变父组件的name</button>
export default {
methods: {
//子组件的事件
changeParentName: function() {
this.$emit('handleChange', 'Jack') // 触发父组件中handleChange事件并传参Jack
// 注：此处事件名称与父组件中绑定的事件名称要一致
}
}
}在父元件中定義並且綁定handleChange 事件
// 父组件
<child @handleChange="changeName"></child>
methods: {
changeName(name) { // name形参是子组件中传入的值Jack
this.name = name
}
}2、透過callback 函數
先在父元件中定義一個callback函數，並且把callback 函數傳過去
// 父组件
<child :callback="callback"></child>
methods: {
callback: function(name) { this.name = name
}
}在子元件中接收，並執行callback 函數
// 子组件
<button @click="callback('Jack')">改变父组件的name</button>
props: {
callback: Function,
}#3、透過$parent / $children 或$refs 存取元件實例
#這兩種都是直接得到元件實例，使用後可以直接呼叫元件的方法或存取資料。
// 子组件
export default {
data () {
return {
title: '子组件'
}
},
methods: {
sayHello () {
console.log('Hello');
}
}
}// 父组件
<template>
<child ref="childRef" />
</template>
<script>
export default {
created () {
// 通过 $ref 来访问子组件
console.log(this.$refs.childRef.title); // 子组件
this.$refs.childRef.sayHello(); // Hello
// 通过 $children 来调用子组件的方法
this.$children.sayHello(); // Hello
}
}
</script>註：這種方式的元件通訊不能跨級。
4. $attrs / $listeners 詳解點這裡
1、还是通过 $emit 和 props 结合的方式
在父组件中给要传值的两个兄弟组件都绑定要传的变量，并定义事件
// 父组件
<child-a :myName="name" />
<child-b :myName="name" @changeName="editName" />
export default {
data() {
return {
name: 'John'
}
},
components: {
'child-a': ChildA,
'child-b': ChildB,
},
methods: {
editName(name) {
this.name = name
},
}
}在子组件B中接收变量和绑定触发事件
// child-b 组件
<p>姓名：{{ myName }}</p>
<button @click="changeName">修改姓名</button>
<script>
export default {
props: ["myName"],
methods: {
changeName() {
this.$emit('changeName', 'Lily') // 触发事件并传值
}
}
}
</script>// child-a 组件
<p>姓名：{{ newName }}</p>
<script>
export default {
props: ["myName"],
computed: {
newName() {
if(this.myName) { // 判断是否有值传过来
return this.myName
}
return 'John' //没有传值的默认值
}
}
}
</script>即：当子组件B 通过 $emit() 触发了父组件的事件函数 editName，改变了父组件的变量name 值，父组件又可以把改变了的值通过 props 传递给子组件A，从而实现兄弟组件间数据传递。
2. 通过一个空 vue 实例
创建一个 EventBus.js 文件，并暴露一个 vue 实例
import Vue from 'Vue'export default new Vue()
在要传值的文件里导入这个空 vue 实例，绑定事件并通过 $emit 触发事件函数
(也可以在 main.js 中全局引入该 js 文件，我一般在需要使用到的组件中引入)
<template>
<div>
<p>姓名: {{ name }}</p>
<button @click="changeName">修改姓名</button>
</div>
</template>
<script>
import { EventBus } from "../EventBus.js"
export default {
data() {
return {
name: 'John',
}
},
methods: {
changeName() {
this.name = 'Lily'
EventBus.$emit("editName", this.name) // 触发全局事件,并且把改变后的值传入事件函数
}
}
}
</script>在接收传值的组件中也导入 vue 实例，通过 $on 监听回调，回调函数接收所有触发事件时传入的参数
import { EventBus } from "../EventBus.js"
export default {
data() {
return {
name: ''
}
},
created() {
EventBus.$on('editName', (name) => {
this.name = name
})
}
}这种通过创建一个空的 vue 实例的方式，相当于创建了一个事件中心或者说是中转站，用来传递和接收事件。这种方式同样适用于任何组件间的通信，包括父子、兄弟、跨级，对于通信需求简单的项目比较方便，但对于更复杂的情况，或者项目比较大时，可以使用 vue 提供的更复杂的状态管理模式 Vuex 来进行处理。
3. 使用 vuex →点这里
有时需要实现通信的两个组件不是直接的父子组件，而是祖父和孙子，或者是跨越了更多层级的父子组件，这种时候就不可能由子组件一级一级的向上传递参数，特别是在组件层级比较深，嵌套比较多的情况下，需要传递的事件和属性较多，会导致代码很混乱。
这时就需要用到 vue 提供的更高阶的方法：provide/inject。
这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。查 看 官 网
provide/inject：简单来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量，不管组件层级有多深，在父组件生效的生命周期内，这个变量就一直有效。
父组件：
export default {
provide: { // 它的作用就是将 **name** 这个变量提供给它的所有子组件。
name: 'Jack'
}
}子组件：
export default {
inject: ['name'], // 注入了从父组件中提供的name变量
mounted () {
console.log(this.name); // Jack
}
}注：provide 和 inject 绑定并不是可响应的。即父组件的name变化后，子组件不会跟着变。
如果想要实现 provide 和 inject 数据响应，有两种方法：
// 父组件
<div>
<button @click="changeName">修改姓名</button>
<child-b />
</div>
<script>
......
data() {
return {
name: "Jack"
};
},
provide() {
return {
parentObj: this //提供祖先组件的实例
};
},
methods: {
changeName() {
this.name = 'Lily'
}
}
</script>后代组件中取值：
<template>
<div class="border2">
<P>姓名：{{parentObj.name}}</P>
</div>
</template>
<script>
export default {
inject: {
parentObj: {
default: () => ({})
}
} // 或者inject: ['parentObj']
};
</script>注：这种方式在函数式组件中用的比较多。函数式组件，即无状态(没有响应式数据)，无实例化(没有 this 上下文)，内部也没有任何生命周期处理方法，所以渲染性能高，比较适合依赖外部数据传递而变化的组件。
使用 Vue.observable 优化响应式 provide，这个我用的不熟就不说了，可以 → 官方文档
父子通信：父向子传递数据是通过 props，子向父是通过 $emit；通过 $parent / $children 通信；$ref 也可以访问组件实例；provide / inject ；
兄弟通信： EventBus；Vuex；
跨级通信： EventBus；Vuex；provide / inject ；$attrs / $listeners；
相关推荐：《vue.js教程》
以上是vue元件傳值的方法有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！
