VUE元件之間的通訊
阿新 • • 發佈:2018-12-11
前言:第一次分享學習過程中的一些感悟與體會,不喜勿噴;VUE是一個漸進式的框架,便於前端專案的開發,第一次接觸VUE的時候,發現這個東西很神奇。所有的頁面均為元件化,對於頁面上重複出現的部分我們可以抽取出來作為一個單獨的元件,每次引用的時候均會有元件之間的通訊。下面,我就把我在學習過程中的收穫記錄下來:
一、元件之間的通訊
通訊方式分為傳值和傳引用兩種方式:
傳值:String ,Number , Boolean;
傳引用:Array , Object
注:傳引用的時候,一個地方的資料變化,其餘地方引用的資料也會跟著變化。
二、父元件向子元件傳值
在父元件中,需要註冊子元件並引用子元件,這裡演示兩種,傳值和傳引用。在子元件中需要通過props屬性來接收父元件傳遞的值。具體程式碼示例如下:
<template> <div> <!-- 這裡是父元件 --> <Test :intems="intems" :title="title"></Test> </div> </template> <script> import Test from './Test' export default{ data(){ return{ title:'傳遞的是一個值,(number,string,boolean)', intems: [ {name:'小白兔',sex:"女",age:"18",school:"-------大學"}, {name:'小白兔',sex:"男",age:"23",school:"-------大學"}, {name:'小白兔',sex:"女",age:"12",school:"-------大學"}, {name:'小白兔',sex:"女",age:"26",school:"-------大學"}, {name:'小白兔',sex:"男",age:"20",school:"-------大學"}, ] } }, components:{ Test } } </script>
<!-- 這裡是Test子元件 --> <template> <div> <!-- 這裡直接使用父元件傳遞過來的引用 --> <table> <tbody> <tr v-for="intem in intems" :key="intem.id"> <td>{{intem.name}}</td> <td>{{intem.sex}}</td> <td>{{intem.age}}</td> <td>{{intem.school}}</td> </tr> </tbody> </table> <!-- 這裡直接使用父元件傳遞過來的值 --> <h1>{{title}}</h1> </div> <template> <script> export default{ data(){ return{ //props:["intems"],//兩種接收父元件值得方法,第二種比較嚴謹 props:{ intems:{ type:Array, required:true }, title:{ type:String } } } } } </script> <style></style>
三、子元件向父元件傳值
在子元件中向父元件傳值,需要觸發或是監聽到值變化向父元件進行傳遞。具體程式碼如下:
<template> <div> <!-- 這裡是子元件Test,演示向父元件傳值 --> <button v-on:click="Msg">子元件傳值到父元件</button> </div> </template> <script> export default{ methods:{ //子元件向父元件事件傳值 Msg:function(){ //第一個引數是自定義的事件名,第二是內容 this.$emit("msgChanged","子向父元件傳值"); } } } </script>
<template> <div> <!-- 這裡是父元件 --> <Test v-on:msgChanged="updataMsg($event)"></Test> <!-- 顯示子元件傳遞的引數值 --> <h>{{msgZXC}}</h> </div> </template> <script> import Test from './Test' export default{ data(){ msgZXC : '等待接收子元件傳遞的引數值' }, methods:{ updataMsg(msgZXCChanged){ this.msgZXC = msgZXCChanged; } }, components:{ Test } } </script>
三、兄弟元件之間的通訊
兄弟元件為同一個父元件當中的兩個子元件之間的通訊。這裡不再做程式碼展示,應用場景個人覺得相對沒有前兩種多,兄弟元件之間的通訊可以使用watch(監聽)來進行實現,通過中轉變數。