1. Parent data is transmitted to the sub
1> defines a parent component and a child component
2> binding parent component transmitted through v-bind data : parentmsg = "MSG"
3> need subassembly The props: [ ''] for receiving data The props: [ ' parentmsg ' ],
<body>
<div id="app">
<comp1 :parentmsg="msg"></comp1>
</div>
<template id="tmpl1">
<div>
<h1>这是子元素--{{parentmsg}}</h1>
</div>
</template>
<script>
var comp1 = {
template: '#tmpl1',
The props: [ ' parentmsg ' ],
}
var VM = new new Vue ({
EL: ' #app ' ,
Data: {
MSG: ' I data parent components ' ,
},
Components: {
COMP1
}
})
</ Script >
</ body >
2. Data is transmitted to the parent sub
1> sub-assembly through a trigger to call an event pass data to the parent element method @ click = "sendMsg"
2> pass data through this. $ Emit ( 'func', this.msg) to the parent component to invoke a method on the parent @ func binding component = "getMsgFromSon"
3> to get the data passed over by the process of subassembly
methods: {
getMsgFromSon(data){
this.msgSon=data
}
},
<body>
<div id="app">
<comp1 :parentmsg="msg" @func="getMsgFromSon"></comp1>
<h1>{{msgSon}}</h1>
</div>
<template id="tmpl1">
<div>
<h1>这是子元素</h1>
<input type="button" value="向父组件传递消息" @click="sendMsg"/>
</div>
</template>
<script>
var comp1 = {
template: '#tmpl1',
props:['parentmsg'],
data(){
return{
msg:'我是子组件中的数据'
}
},
methods:{
sendMsg(){
this.$emit('func',this.msg)
}
}
}
var vm = new Vue({
el: '#app',
data: {
msg:'我是父组件中的数据',
msgSon:''
},
methods: {
getMsgFromSon(data){
this.msgSon=data
}
},
components: {
comp1
}
})
</script>
</body>