vue父子組件進行傳值 vue中的父子組件，什麼是父組件什麼是子組件呢？就跟html標簽一樣，誰包裹著誰誰就是父組件，被包裹的元素就是子組件。 父組件向子組件傳值 下麵用的script引入的方式，那種vue-cli搭建的同理 父組件通過 v-bind：屬性名（自定義的） = "要傳遞的數據" 子組件 ...
vue父子組件進行傳值
vue中的父子組件，什麼是父組件什麼是子組件呢？就跟html標簽一樣，誰包裹著誰誰就是父組件，被包裹的元素就是子組件。
父組件向子組件傳值
下麵用的script引入的方式，那種vue-cli搭建的同理
父組件通過 v-bind：屬性名（自定義的） = "要傳遞的數據"
子組件通過 props:["屬性名"] 這個屬性名就是父組件傳遞過來的數據信息
<div id="app">
<mod :abc="name" :d="title"></mod>
</div>
/*
父組件向子組件發送消息
*/
Vue.component('mod',{
template:'<div>{{abc}} {{d}}</div>',
props:['abc','d'],
data:function () {
return {
}
}
});
// 父組件向子組件傳遞數據
new Vue({
el:"#app",
data:{
name:'123',
title:'456'
}
});
子組件向父組件傳值
子組件向父組件傳值時，子組件中 通過$.emit('自定義名字'，‘要傳遞的數據’)
父組件通過 v-on:子組件自定義的名字 = 函數 函數的arguments中就會接收到這個值
<div id="app">
<!-- 綁定要發送的消息的名稱 -->
<wulv @aabb="abc"></wulv>
</div>
Vue.component('wulv',{
template:'<div><button @click="btn">按鈕</button></div>',
methods:{
btn(){
// 發送消息
// 事件的名稱 後面所有的都是要傳遞的消息
this.$emit('aabb','a','b','c');
}
}
});
new Vue({
el:'#app',
methods:{
abc(){
console.log(arguments); // 這裡的arguments就是傳遞過來的值
}
}
})
父子組件傳值非常簡單，多用幾次就可以學會了，在此作為筆記記錄下來。
如果你有幸看到我的文章學到了一點東西，我會非常高興的。
