vue.js 組件數據傳遞
阿新 • • 發佈:2019-04-10
method 引入 傳遞數據 定義 ring 我們 ace script cti 一 父---> 子 組件通信
1,聲明一個組件(props 指定組件外來接受的參數,我指定了一個string類型的message參數,默認內容為‘I Am AESCR’)
1,聲明一個組件(props 指定組件外來接受的參數,我指定了一個string類型的message參數,默認內容為‘I Am AESCR’)
Vue.component(‘test-com‘,{ props:{ message:{ type:String, default:‘I Am AESCR‘ } }, template:‘<div>{{message}}</div>‘ }) <div id="app"> <test-com message=‘邊學邊記‘></test-com> </div>
2,把需要傳遞的內容直接寫在組件屬性上面,通過v-bind:形式綁定,傳遞內容就變得容易修改了
<div id="app"> <input type="text" v-model=‘msg‘ placeholder="請輸入內容"/> <test-com v-bind:message=‘msg‘></test-com> </div> <script> Vue.component(‘test-com‘,{ props:{ message:{ type:String, default:‘默認信息‘ } }, template:‘<div>{{message}}</div>‘ }) new Vue({ el:‘#app‘, data:{ msg:‘I an AESCR‘ } }) </script>
二 子 --->父組件數據傳遞
1,通過觸發事件的方式來傳遞數據,我們先說明一個組件,和一個事件
Vue.component(‘test-com‘,{ data:function(){ return{ msg:‘I am AESCR‘ } }, methods: { hello:function(){ this.$emit(‘sayhello‘,this.msg) #sayhello 為組件上監聽的事件名稱一致,後面為參數 } }, template:‘<div><input type="button" v-on:click="hello()" value="打招呼" /><input type="text" v-model="msg"/></div>‘ }) 調用組件 <div id="app2"> <p>外層 {{content}}</p> <test-com v-on:sayhello=‘sayhellocontent‘></test-com> #sayhellocontent為外層事件名稱 </div> new Vue({ el:‘#app2‘, data:{ ‘content‘:null, }, methods:{ sayhellocontent:function(content){ #content會接受到$emit傳遞的參數 this.content=content } } })
三 組件間傳遞數據
1.新建一個js文件,然後引入vue 實例化vue 最後暴露這個實例
2.在要廣播的地方引入剛才定義實例
3.通過vueEmit.$emit(‘名稱‘,‘數據’)
4.在接收數據
---------------------------------------------------
Vue.$on(‘名稱‘,function(){
})
我們可以實例化一個vue實例,相當於一個第三方
let vm = new Vue(); //創建一個新實例
<div @click="ge"></div>
methods: {
ge() {
vm.$emit(‘blur‘,‘sichaoyun‘); //觸發事件 傳遞參數
}
}
組件接受
created() {
vm.$on(‘blur‘, (arg) => {
this.test= arg; // 接收
});
}
vue.js 組件數據傳遞