vue組件怎麼傳值
傳值方法：1、利用props實作父傳子；2、子傳父，需要自訂事件，在子元件中以「this.$emit('事件名稱')」觸發，而父中以「@事件名」監聽；3、兄弟間，透過公有父元素作為橋接，結合父子props傳參、子父自訂事件；4、用路由傳值；5、用$ref傳值；6 、以依賴注入傳給後代子孫曾孫；7、利用$attrs；8、藉助$listeners中間事件；9、用$parent傳等。
本教學操作環境：windows7系統、vue3版，DELL G3電腦。
這篇文章帶大家聊聊vue元件傳值的10種方式，常用的也有五六種，先上一張總結圖：
1、父元件傳給子元件
在子元件裡定義一個props,即props:['msg']，msg可以是物件也可以是基本資料型別
如果你想定義一個預設值，也就是props:{msg: {type: String, default: 'hello world'}},
若預設值是物件類型：props: { msg: { type: Object, default: () => { return { name: 'dan_seek' } } }}
#需要注意的是這種傳值是單向的，你無法改變父元件的值（當然引用型別例外）；而且如果直接修改props的值會報一個警告。
建議的寫法是在data()裡重新定義一個變數（見Children.vue），並且把props賦值給它，當然計算屬性也行。
Children.vue
<template>
<section>
父组件传过来的消息是：{{myMsg}}
</section>
</template>
<script>
export default {
name: "Children",
components: {},
props:['msg'],
data() {
return {
myMsg:this.msg
}
},
methods: {}
}
</script>Parent.vue
<template>
<div class="parent">
<Children :msg="message"></Children>
</div>
</template>
<script>
import Children from '../components/Children'
export default {
name: 'Parent',
components: {
Children
},
data() {
return {
message:'hello world'
}
},
}
</script>2、子元件傳給父元件
#這裡需要使用自訂事件，在子元件中使用this.$emit('myEvent') 觸發，然後在父元件中使用@myEvent監聽
Children.vue
<template>
<div class="parent">
这里是计数：{{parentNum}}
<Children-Com @addNum="getNum"></Children-Com>
</div>
</template>
<script>
import ChildrenCom from '../components/Children'
export default {
name: 'Parent',
components: {
ChildrenCom
},
data() {
return {
parentNum: 0
}
},
methods:{
// childNum是由子组件传入的
getNum(childNum){
this.parentNum = childNum
}
}
}
</script>Parent.vue
<template>
<div class="parent">
这里是计数：{{parentNum}}
<Children-Com @addNum="getNum"></Children-Com>
</div></template><script>
import ChildrenCom from '../components/Children'
export default {
name: 'Parent',
components: {
ChildrenCom },
data() {
return {
parentNum: 0
}
},
methods:{
// childNum是由子组件传入的
getNum(childNum){
this.parentNum = childNum }
}
}</script>3、兄弟元件間傳值
運用自訂事件emit的觸發和監聽能力，定義一個公共的事件匯流排eventBus，透過它作為中間橋樑，我們就可以傳值給任意元件了。而且透過eventBus的使用，可以加深emit的理解。
EventBus.js
import Vue from 'vue' export default new Vue()
Children1.vue
<template>
<section>
<div @click="pushMsg">push message</div>
<br>
</section>
</template>
<script>
import eventBus from './EventBus'
export default {
name: "Children1",
components: {},
data() {
return {
childNum:0
}
},
methods: {
pushMsg(){
// 通过事件总线发送消息
eventBus.$emit('pushMsg',this.childNum++)
}
}
}
</script>Children2.vue
<template>
<section>
children1传过来的消息：{{msg}}
</section>
</template>
<script>
import eventBus from './EventBus'
export default {
name: "Children2",
components: {},
data() {
return {
msg: ''
}
},
mounted() {
// 通过事件总线监听消息
eventBus.$on('pushMsg', (children1Msg) => {
this.msg = children1Msg
})
}
}
</script>Parent.vue
<template>
<div class="parent">
<Children1></Children1>
<Children2></Children2>
</div>
</template>
<script>
import Children1 from '../components/Children1'
import Children2 from '../components/Children2'
export default {
name: 'Parent',
components: {
Children1,
Children2
},
data() {
return {
}
},
methods:{
}
}
</script>github上還有一個開源vue-bus庫，可以參考下： https://github.com/yangmingshan/vue-bus#readme
4、路由間傳值
A頁面跳轉B頁面時使用this.$router.push('/B?name =danseek')
B頁面可以使用this.$route.query.name 來取得A頁面傳過來的值
#上面要注意router和route的區別
配置以下路由：
{
path: '/b/:name',
name: 'b',
component: () => import( '../views/B.vue')
},在B頁面可以透過this.$route.params.name 來取得路由傳入的name的值
由於router-view本身也是元件，所以我們也可以使用父子元件傳值方式傳值，然後在對應的子頁面裡加上props，因為type更新後沒有刷新路由，所以不能直接在子頁的mounted鉤子裡直接取得最新type的值，而要使用watch。
<router-view :type="type"></router-view>
// 子页面
......
props: ['type']
......
watch: {
type(){
// console.log("在这个方法可以时刻获取最新的数据:type=",this.type)
},
},5、使用$ref傳值
透過$ref的能力，給子元件定義一個ID，父元件透過這個ID可以直接存取子元件裡面的方法與屬性
先定義一個子元件Children.vue
<template>
<section>
传过来的消息：{{msg}}
</section>
</template>
<script>
export default {
name: "Children",
components: {},
data() {
return {
msg: '',
desc:'The use of ref'
}
},
methods:{
// 父组件可以调用这个方法传入msg
updateMsg(msg){
this.msg = msg
}
},
}
</script>然後在父元件Parent.vue中引用Children.vue，並定義ref屬性
<template>
<div class="parent">
<!-- 给子组件设置一个ID ref="children" -->
<Children ref="children"></Children>
<div @click="pushMsg">push message</div>
</div>
</template>
<script>
import Children from '../components/Children'
export default {
name: 'parent',
components: {
Children,
},
methods:{
pushMsg(){
// 通过这个ID可以访问子组件的方法
this.$refs.children.updateMsg('Have you received the clothes？')
// 也可以访问子组件的属性
console.log('children props:',this.$refs.children.desc)
}
},
}
</script>6、使用依賴注入傳給後代子孫曾孫
假設父元件有一個方法getName()，需要把它提供給所有的後代
provide: function () {
return {
getName: this.getName()
}
}provide 選項允許我們指定我們想要提供給後代元件的資料/方法
然後在任何後代元件裡，我們都可以使用inject 來為目前實例注入父元件的資料/方法：
inject: ['getName']
Parent.vue
<template>
<div class="parent">
<Children></Children>
</div>
</template>
<script>
import Children from '../components/Children'
export default {
name: 'Parent',
components: {
Children,
},
data() {
return {
name:'dan_seek'
}
},
provide: function () {
return {
getName: this.name
}
},
}
</script>Children.vue
父组件传入的值：{{getName}}
<script>
export default {
name: "Children",
components: {},
data() {
return {
}
},
inject: [&#39;getName&#39;],
}
</script>7、祖傳孫$attrs
正常情況下需要藉助父親的props作為中間過渡，但是這樣在父親組件就會多了一些跟父組件業務無關的屬性，耦合度高，借助$attrs可以簡化些，而且祖跟孫都不需要做修改
GrandParent.vue
<template>
<section>
<parent name="grandParent" sex="男" age="88" hobby="code" @sayKnow="sayKnow"></parent>
</section>
</template>
<script>
import Parent from './Parent'
export default {
name: "GrandParent",
components: {
Parent
},
data() {
return {}
},
methods: {
sayKnow(val){
console.log(val)
}
},
mounted() {
}
}
</script>Parent.vue
<template>
<section>
<p>父组件收到</p>
<p>祖父的名字：{{name}}</p>
<children v-bind="$attrs" v-on="$listeners"></children>
</section>
</template>
<script>
import Children from './Children'
export default {
name: "Parent",
components: {
Children
},
// 父组件接收了name,所以name值是不会传到子组件的
props:['name'],
data() {
return {}
},
methods: {},
mounted() {
}
}
</script>Children.vue
<template>
<section>
<p>子组件收到</p>
<p>祖父的名字：{{name}}</p>
<p>祖父的性别：{{sex}}</p>
<p>祖父的年龄：{{age}}</p>
<p>祖父的爱好：{{hobby}}</p>
<button @click="sayKnow">我知道啦</button>
</section>
</template>
<script>
export default {
name: "Children",
components: {},
// 由于父组件已经接收了name属性，所以name不会传到子组件了
props:['sex','age','hobby','name'],
data() {
return {}
},
methods: {
sayKnow(){
this.$emit('sayKnow','我知道啦')
}
},
mounted() {
}
}
</script>#顯示結果
父组件收到 祖父的名字：grandParent 子组件收到 祖父的名字： 祖父的性别：男 祖父的年龄：88 祖父的爱好：code
8、孫傳祖
借助$listeners中間事件，孫可以方便的通知祖，程式碼範例見7
########################################################################## ########9、$parent#########透過parent可以取得父元件實例，然後透過這個實例就可以存取父元件的屬性和方法，它還有一個兄弟root，可以取得根組件實例。 ###
语法：
// 获父组件的数据 this.$parent.foo // 写入父组件的数据 this.$parent.foo = 2 // 访问父组件的计算属性 this.$parent.bar // 调用父组件的方法 this.$parent.baz()
于是，在子组件传给父组件例子中，可以使用this.$parent.getNum(100)传值给父组件。
10、sessionStorage传值
sessionStorage 是浏览器的全局对象，存在它里面的数据会在页面关闭时清除 。运用这个特性，我们可以在所有页面共享一份数据。
语法：
// 保存数据到 sessionStorage sessionStorage.setItem('key', 'value'); // 从 sessionStorage 获取数据 let data = sessionStorage.getItem('key'); // 从 sessionStorage 删除保存的数据 sessionStorage.removeItem('key'); // 从 sessionStorage 删除所有保存的数据 sessionStorage.clear();
注意：里面存的是键值对，只能是字符串类型，如果要存对象的话，需要使用 let objStr = JSON.stringify(obj) 转成字符串然后再存储（使用的时候 let obj = JSON.parse(objStr) 解析为对象）。
这样存对象是不是很麻烦呢，推荐一个库 good-storage ，它封装了sessionStorage ，可以直接用它的API存对象
// localStorage storage.set(key,val) storage.get(key, def) // sessionStorage storage.session.set(key, val) storage.session.get(key, val)
更多请移步：https://github.com/ustbhuangyi/storage#readme
以上是vue組件怎麼傳值的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
vue中怎麼用bootstrap
Apr 07, 2025 pm 11:33 PM
在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。
vue怎麼給按鈕添加函數
Apr 08, 2025 am 08:51 AM
可以通過以下步驟為 Vue 按鈕添加函數：將 HTML 模板中的按鈕綁定到一個方法。在 Vue 實例中定義該方法並編寫函數邏輯。
vue中的watch怎麼用
Apr 07, 2025 pm 11:36 PM
Vue.js 中的 watch 選項允許開發者監聽特定數據的變化。當數據發生變化時，watch 會觸發一個回調函數，用於執行更新視圖或其他任務。其配置選項包括 immediate，用於指定是否立即執行回調，以及 deep，用於指定是否遞歸監聽對像或數組的更改。
vue多頁面開發是啥意思
Apr 07, 2025 pm 11:57 PM
Vue 多頁面開發是一種使用 Vue.js 框架構建應用程序的方法，其中應用程序被劃分為獨立的頁面：代碼維護性：將應用程序拆分為多個頁面可以使代碼更易於管理和維護。模塊化：每個頁面都可以作為獨立的模塊，便於重用和替換。路由簡單：頁面之間的導航可以通過簡單的路由配置來管理。 SEO 優化：每個頁面都有自己的 URL，這有助於搜索引擎優化。
vue返回上一頁的方法
Apr 07, 2025 pm 11:30 PM
Vue.js 返回上一頁有四種方法：$router.go(-1)$router.back()使用 <router-link to="/"> 組件window.history.back()，方法選擇取決於場景。
vue.js怎麼引用js文件
Apr 07, 2025 pm 11:27 PM
在 Vue.js 中引用 JS 文件的方法有三種：直接使用 <script> 標籤指定路徑；利用 mounted() 生命週期鉤子動態導入；通過 Vuex 狀態管理庫進行導入。
vue遍歷怎麼用
Apr 07, 2025 pm 11:48 PM
Vue.js 遍歷數組和對像有三種常見方法：v-for 指令用於遍歷每個元素並渲染模板；v-bind 指令可與 v-for 一起使用，為每個元素動態設置屬性值；.map 方法可將數組元素轉換為新數組。
vue的div怎麼跳轉
Apr 08, 2025 am 09:18 AM
Vue 中 div 元素跳轉的方法有兩種：使用 Vue Router，添加 router-link 組件。添加 @click 事件監聽器，調用 this.$router.push() 方法跳轉。
