子传父
逻辑： 单击子组件的按钮 ，触发它的单击事件 通过 $emit 触发父级自定义事件 并传一个值给父级
<div id="id">
<h3>儿子 你今年多大了 -- {{age}}</h3>
<!-- @getage 自定义事件 -->
<con1 @getage='getage'></con1>
</div>
<!-- 写一个子组件模板 -->
<template id="son1">
<!-- 必须用一个大盒子包裹 -->
<div>
<h3>我今年<input type="button" value="已经" @click='click'></h3>
</div>
</template>
<script>
//创建一个Vue实例
var ss = new Vue({
el:'#id',
data:{
// 定义变量 age
age:' '
},
methods:{
//getage(age) age为子级传来的值 获取到之后 更改父级age的值
getage(age){
this.age = age
}
},
components:{
//定义一个私有的子级模板
con1:{
template:"#son1",
data(){
return {
age:22
}
},
methods:{
// click 单击事件 $emit 触发父级事件 并传值
click(){
this.$emit('getage',this.age)
}
}
}
}
})
</script>
父传子
逻辑： 父级向子级传值 只用 props：[ ] 将父级元素传递给子级
// 注意： 组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的
// props 中的数据，都是只读的，无法重新赋值
// 能够获得当前组件标签身上对应属性的属性值
<div id="id">
<h2>你爸我有{{money}}</h2>
<con1 :money='money'></con1>
</div>
<script>
var ss = new Vue({
el:'#id',
data:{
money:1000000
},
methods:{
},
//定义一个私有子组件
components:{
con1:{
template:'<h3>爸，我知道你有{{money}}</h3>',
//props 父组件向子组件传值
props:['money']
}
}
})
</script>