1.父组件向子组件传递数据
<script src="../js/vue.js"></script>
<div id="app">
<cpn :get_parent="parentMessage"></cpn>
</div>
<template id="child">
<div>
<h2>我是子组件</h2>
<h2>父组件传过来的数据:{{get_parent}}</h2>
</div>
</template>
<script>
/** 父子组件之间的数据传递
* 父传子 子组件接收数据
* 1.子组件通过props 接收数据
* 2.并在使用子组件时 绑定接收数据的data名 和父组件的原data名
* */
const vm = new Vue({
el: "#app",
data: {
parentMessage : 'Hello Son'
},
components : {
cpn : {
template : '#child',
props : {
get_parent : {
type : String, /** 设置接收的数据类型*/
default(){ /** 默认值*/
return null
}
}
}
}
}
})
</script>
2.子组件向父组件传递数据
<div id="app">
<cpn @send="get_child"></cpn>
<h2>子组件传递过来的数据:{{message}}</h2>
</div>
<template id="child">
<div>
<h2>我是子组件</h2>
<button @click="sendMess">向父组件传递数据</button>
</div>
</template>
<script>
/** 父子组件之间的数据传递
* 父传子 子组件接收数据
* 1.子组件通过$emit 发送事件和数据
* 2.父组件通过methods获取子组件传递过来的数据
* 3.父组件通过v-on绑定事件和接收数据的方法
* */
const vm = new Vue({
el: "#app",
data: {
parentMessage : 'Hello Son',
message : ''
},
methods: {
get_child(mess){
this.message = mess
}
},
components : {
cpn : {
template : '#child',
data(){
return {
childMessage : 'Hello father'
}
},
methods :{
sendMess(){
this.$emit('send',this.childMessage)
}
}
}
}
})
</script>