vue 组件的三种传值方式

一、父传子

关键词：添加属性 props

< body>

< div id= "edd" >

< v-fa>v-fa>

< v-box > v-box >

div >

< template id= "father" >

< div >

< p >{{str}} p >

< button @ click= 'tap' >向子组件传值 button >

< hr/ >

div >

template >

< template id= "child" >

< div >

{{this.name}}

div >

template >

body>

< script >

var vm = new Vue ({

el: '#edd' ,

components:{

'v-fa' :{

template: '#father' ,

data : function (){

return {

str: '我是父组件' ,

str1: ''

}

},

methods:{

tap (){

this . str1 = this . str

}

},

components:{

'v-child' :{

props:['name'],

template: '#child' ,

data : function (){

return {}

}

}

}

},

}

})

< / script >

二、子传父

关键词：$emit   定义方法

< body>

< div id= "out" >

< v-father>v-father>

div >

< template id= "father" >

< div >

< h1 >father------{{str}} h1 >

< hr >

div >

template >

< template id= "child" >

< div >

< h1 >childr-------{{str}} h1 >

div >

template >

body>

< script >

var vm = new Vue ({

el: '#out' ,

components:{

'v-father' :{

template: '#father' ,

data (){

return {

str: ''

}

},

methods:{

getdata(msg){

this.str = msg

}

},

components:{

'v-child' :{

template: '#child' ,

data (){

return {

str: 'this is child'

}

},

created(){

this.$emit('to-parent',this.str)

}

}

}

}

}

})

< / script >

三、平行组件传值

关键词：$emit  $on  空的vue对象

< body>

< div id= "app" >

< v-a>v-a>

< hr >

< v-b>v-b>

div >

< template id= "a" >

< div >

this is a {{str}}

< button @ click= 'tap' >send button >

div >

template >

< template id= "b" >

< div >

this is b {{str}}

div >

template >

body>

< script >

var vm1 = new Vue()

var vm = new Vue ({

el: '#app' ,

components:{

'v-a' :{

template: '#a' ,

data (){

return {

str: 'this is a ,need to b'

}

},

methods:{

tap (){

vm1 . $emit ( "isa" , this . str )

}

}

},

'v-b' :{

template: '#b' ,

data (){

return {

str: ''

}

},

mounted (){

var _this = this ;

vm1.$on("isa",function(msg){

_this.str = msg

})

}

}

}

})

< / script >