這篇文章帶給大家的內容是關於vue的傳值方式有哪些? vue中常用的傳值方式介紹(3種),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
一. 父元件傳送值給子元件
1. 使用props建立資料通道的管道
// 这是父组件 <div id="app"> // 这是子组件 <child message="hello" ></child> </div>
2 . 在子元件中透過props傳遞過來的資料
Vue,component('child',{ props:['message'] })
二.子元件向父元件傳值
1.子元件中需要一個點擊事件觸發一個自訂事件
Vue.component('child',{ methods:{ handleClick(){ // 在相应该点击事件的函数使用$emit来触发一个自定义事件,并传递一个参数 this.$emit('parentClick',123) } }, template:` <div> <h1>这是子组件</h1> <button @click="handleClick" > 发送给父组件 </button> </div> ` })
2.在父元件中的子標籤監聽該自訂事件傳遞的值
Vue.component('parent', { data() { return { msg: '我是子组件' } }, methods: { receiveMsg(value) { console.log(value) this.msg = value } }, template:' <div> <h1>这是子组件</h1> <p>接收子组件传过来的值{{msg}}</p> <child @parentClick='receiveMsg'></child> </div> ' })
三. 非父子元件傳值
有時候兩個元件也需要傳值(非父子關係),所以我們需要一個公共的vue來進行傳遞值和取得值
1 .創建一個空的vue
// 创建一个空的公共的vue对象 var bus = new Vue();
2 . 在元件1中,定義$emit來傳送資料
bus.$emit('test','数据')
3 . 在元件2中使用$on來接收傳遞的資料
bus.$on('test', function(num) { this.msg= num; //事件的解绑问题 bus.$off("test") })
當然非父子傳值的方法不只有一種我們也可以使用localstorage 來傳值和取值
// 在第一个组件中 setItem 设置值local storage.setItem('test','数据') // 在第二个组件中 getItem 获取值local Storage.getItem("test");
相關推薦:
以上是vue的傳值方式有哪些? vue中常用的傳值方式介紹(3種)的詳細內容。更多資訊請關注PHP中文網其他相關文章!