Vue資料通訊的詳細介紹（附實例）
- 不言轉載
- 2018-11-20 14:27:272586瀏覽
這篇文章帶給大家的內容是關於Vue資料通訊的詳細介紹（附實例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
一、前言
元件是vue.js最強大的功能之一，而元件實例的作用域是相互獨立的，這意味著不同元件之間的數據無法相互引用。組件間如何傳遞資料就顯得至關重要。本文盡可能列出一些常見的資料傳遞方式，如props、$emit/$on和vuex以及新出的$attrs/$listeners和provide/inject，以簡單易懂的實例講述這其中的差別，希望對小夥伴有些許幫助。
二、props
父元件A透過props的方式向子元件B傳遞，B to A 透過在 B 元件中 $emit, A 元件中 v-on 的方式實現。
prop是單向綁定的，當父元件的屬性變化時，將傳導給子元件，反之則不行，
而且不允許直接在一個子元件內部改變prop，否則就會報錯誤。那有時候如果我們想修改傳遞過來的prop,有以下辦法：
方式1：如果子元件想把它當作局部資料來使用，可以將資料存入另一個變數再操作，不影響父元件中的資料。
<div>
<h2>父组件:{{name}}</h2>
<input>
<my-hello></my-hello>
</div>
<template>
<div>
<h3>子组件{{username}}</h3>
<button>修改数据</button>
</div>
</template>
<script>
var vm = new Vue({ //父组件
el: '#itany',
data: {
name: "tom"
},
components: {
'my-hello': { //子组件
props: ["name"],
template: '#hello',
data() {
return {
username: this.name
}
},
// computed: {
// changeName() { //如果要实时监测父组件数据的变化，还必须用到计算属性，
然而计算属性不能直接被更改
// return this.name
// }
// },
methods: {
change() {
this.username = "alice";
// this.changeName = "alice";该方法无效，不能直接更改计算属性
}
},
}
}
});
</script>
這種方法雖然可透過操作另一個變量，影響父組件傳遞過來的數據，但有一個很大弊端就是從此後子組件不能隨著父組件的數據變化而變化。此時如果借助計算屬性，雖然可以同步變化，但子元件卻無法更改傳遞過來的資料。所以該方法比較少用。
方式2：如果子元件想修改資料並且同步更新到父元件，兩個方法：
a.使用.sync（1.0版本中支持，2.0版本中不支持，2.3版本又開始支持）需要明確地觸發一個更新事件。
<div>
<h2>父组件：{{name}}</h2>
<input>
<hr>
<my-hello></my-hello>
</div>
<template>
<div>
<h3>子组件：{{name}}</h3>
<button>修改数据</button>
</div>
</template>
<script>
var vm = new Vue({ //父组件
el: '#itany',
data: {
name: 'tom'
},
components: {
'my-hello': { //子组件
template: '#hello',
props: ['name'],
methods: {
change() {
// this.name='alice';这种写法不行
this.$emit('update:name', 'alice123');
//方式2：a.使用.sync，需要显式地触发一个更新事件
}
}
}
}
});
</script>
b.可以將父元件中的資料包裝成對象，然後在子元件中修改物件的屬性(因為物件是引用類型，指向同一個記憶體空間)，推薦
<div>
<h2>父组件：{{name}}</h2>
<input>
<h2>父组件：{{user.age}}</h2>
<hr>
<my-hello></my-hello>
</div>
<template>
<div>
<h3>子组件：{{name}}</h3>
<h3>子组件：{{user.age}}</h3>
<button>修改数据</button>
</div>
</template>
<script>
var vm = new Vue({ //父组件
el: '#itany',
data: {
name: 'tom',
user: { //父组件中的数据包装成对象
name: 'zhangsan',
age: 24
}
},
components: {
'my-hello': { //子组件
template: '#hello',
props: ['name', 'user'],
methods: {
change() {
this.user.age = 18;
}
}
}
}
});
</script>
這是因為在JavaScript 中物件和陣列是透過引用傳入的，所以對於一個陣列或物件類型的prop 來說，在子元件中改變這個物件或陣列本身將會影響到父元件的狀態。
三、$emit/$on
這種方法透過一個空的Vue實例作為中央事件匯流排（事件中心），用它來觸發事件和監聽事件,巧妙而輕量地實現了任何組件間的通信，包括父子、兄弟、跨級。當我們的專案比較大時，可以選擇更好的狀態管理解決方案vuex。
1.具體實作方式：
var Event=new Vue();
Event.$emit(事件名,数据);
Event.$on(事件名,data => {});
2.舉例：兄弟元件有三個，分別是A、B、C，C元件如何取得A或B元件的資料
<div>
<my-a></my-a>
<my-b></my-b>
<my-c></my-c>
</div>
<template>
<div>
<h3>A组件：{{name}}</h3>
<button>将数据发送给C组件</button>
</div>
</template>
<template>
<div>
<h3>B组件：{{age}}</h3>
<button>将数组发送给C组件</button>
</div>
</template>
<template>
<div>
<h3>C组件：{{name}}，{{age}}</h3>
</div>
</template>
<script>
var Event = new Vue();//定义一个空的Vue实例
var A = {
template: '#a',
data() {
return {
name: 'tom'
}
},
methods: {
send() {
Event.$emit('data-a', this.name);
}
}
}
var B = {
template: '#b',
data() {
return {
age: 20
}
},
methods: {
send() {
Event.$emit('data-b', this.age);
}
}
}
var C = {
template: '#c',
data() {
return {
name: '',
age: ""
}
},
mounted() {//在模板编译完成后执行
Event.$on('data-a',name => {
this.name = name;//箭头函数内部不会产生新的this，这边如果不用=>,this指代Event
})
Event.$on('data-b',age => {
this.age = age;
})
}
}
var vm = new Vue({
el: '#itany',
components: {
'my-a': A,
'my-b': B,
'my-c': C
}
});
</script>
四、vuex
1.簡單介紹Vuex原理
Vuex實作了單向資料流，在全域擁有一個State存放數據，當元件要更改State中的資料時，必須透過Mutation進行，Mutation同時提供了訂閱者模式供外部插件呼叫獲取State數據的更新。而當所有非同步操作(常見於呼叫後端介面非同步取得更新資料)或批次的同步操作都需要走Action，但Action也是無法直接修改State的，還是需要透過Mutation來修改State的資料。最後，根據State的變化，渲染到視圖上。
2.簡單介紹各模組在流程中的主要功能：
Vue Components：Vue元件。 HTML頁面上，負責接收使用者操作等互動行為，執行dispatch方法觸發對應action進行回應。
dispatch：操作行為觸發方法，是唯一能執行action的方法。
actions：操作行为处理模块,由组件中的
$store.dispatch('action 名称', data1)来触发。然后由commit()来触发mutation的调用 , 间接更新 state。负责处理Vue Components接收到的所有交互行为。包含同步/异步操作，支持多个同名方法，按照注册的顺序依次触发。向后台API请求的操作就在这个模块中进行，包括触发其他action以及提交mutation的操作。该模块提供了Promise的封装，以支持action的链式触发。commit：状态改变提交操作方法。对mutation进行提交，是唯一能执行mutation的方法。
mutations：状态改变操作方法，由actions中的
commit('mutation 名称')来触发。是Vuex修改state的唯一推荐方法。该方法只能进行同步操作，且方法名只能全局唯一。操作之中会有一些hook暴露出来，以进行state的监控等。state：页面状态管理容器对象。集中存储Vue components中data对象的零散数据，全局唯一，以进行统一的状态管理。页面显示所需的数据从该对象中进行读取，利用Vue的细粒度数据响应机制来进行高效的状态更新。
getters：state对象读取方法。图中没有单独列出该模块，应该被包含在了render中，Vue Components通过该方法读取全局state对象。
如果你想深入了解，请点击从头开始学习Vuex这篇文章
五、localStorage
1.简介
HTML5中新增了本地存储的解决方案----WebStorage，它分成两类：sessionStorage和localStorage。localStorage保存的数据长期存在，除非被清除，下一次访问该网站的时候，网页可以直接读取以前保存的数据。
localStorage保存的数据，以“键值对”的形式存在。也就是说，每一项数据都有一个键名和对应的值。所有的数据都是以文本格式保存。
存入数据使用setItem方法。它接受两个参数，第一个是键名，第二个是保存的数据。localStorage.setItem("key","value");
读取数据使用getItem方法。它只有一个参数，就是键名。var valueLocal = localStorage.getItem("key");
如果想深入了解，请点击浏览器存储这篇文章
2.localStorage与Vuex区别
vuex 是 vue 的状态管理器，存储的数据是响应式的。但是并不会保存起来，刷新之后就回到了初始状态，具体做法应该在vuex里数据改变的时候把数据拷贝一份保存到localStorage里面，刷新之后，如果localStorage里有保存的数据，取出来再替换store里的state。
let defaultCity = "上海"
try { // 用户关闭了本地存储功能，此时在外层加个try...catch
if (!defaultCity){
defaultCity = JSON.parse(window.localStorage.getItem('defaultCity'))
}
}catch(e){}
export default new Vuex.Store({
state: {
city: defaultCity
},
mutations: {
changeCity(state, city) {
state.city = city
try {
window.localStorage.setItem('defaultCity', JSON.stringify(state.city));
// 数据改变的时候把数据拷贝一份保存到localStorage里面
} catch (e) {}
}
}
})
3.注意点
由于vuex里，我们保存的状态，都是数组，而localStorage只支持字符串，所以需要用JSON转换：
JSON.stringify(state.subscribeList); // array -> string
JSON.parse(window.localStorage.getItem("subscribeList")); // string -> array
六、$attrs/$listeners
1.简介
多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。但如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点大材小用。为此Vue2.4 版本提供了另一种方法，当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 interitAttrs 选项一起使用。
// demo.vue
<template>
<div>
<foo>
</foo>
</div>
<script>
const childCom = ()=> import('./childCom1.vue')
export default {
data () {
return {
foo: 'Hello World!',
boo: 'Hello Javascript!',
coo: 'Hello Vue',
doo: 'Last'
}
},
components: { childCom }
}
</script></template>
// childCom1.vue
<template>
<div>
<p>foo: {{ foo }}</p>
<p>attrs: {{ $attrs }}</p>
<child-com2></child-com2>
</div>
</template>
<script>
const childCom2 = ()=> import('./childCom2.vue')
export default {
props: ['foo'], // foo作为props属性绑定
inheritAttrs: false,
created () {
console.log(this.$attrs) // { boo: 'Hello Javascript!', coo: 'Hello Vue', doo: 'Last' }
}
}
</script>
// childCom2.vue
<template>
<div>
<p>boo: {{ boo }}</p>
<p>attrs: {{ $attrs }}</p>
<child-com3></child-com3>
</div>
</template>
<script>
const childCom3 = ()=> import('./childCom3.vue')
export default {
props: ['boo'] // boo作为props属性绑定
inheritAttrs: false,
created () {
console.log(this.$attrs) // { coo: 'Hello Vue', doo: 'Last' }
}
}
</script>
<span style="font-family: 微软雅黑, Microsoft YaHei;">$attrs表示没有继承数据的对象，格式为{属性名：属性值}。Vue2.4提供了$attrs , $listeners 来传递数据与事件，跨级组件之间的通讯变得更简单</span>
七、provide/inject
1.简介
Vue2.2.0新增API,这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。一言而蔽之：祖先组件中通过provider来提供变量，然后在子孙组件中通过inject来注入变量。
2.举个例子
// 父组件
export default {
name: "Parent",
provide: {
parent: "父组件的值"
}
}
// 子组件
export default {
name: "",
inject: ['parent'],
data() {
return {
demo: this.parent //"父组件的值"
}
}
}
上例中子组件中inject注入了父组件provide提供的变量parent，并将它提供给了data属性
如果需要源代码，请戳源代码
以上是Vue資料通訊的詳細介紹（附實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！