vue父子组件之间传值

　　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就是传递过来的值
}
}
})

　　父子组件传值非常简单，多用几次就可以学会了，在此作为笔记记录下来。

　　如果你有幸看到我的文章学到了一点东西，我会非常高兴的。