父子组件通信
父组件控制子组件,父组件控制自己的数据变化,将变化后的数据通过props自定义属性传给子组件
1.在组件标签上使用自定属性
2.在组件内部通过props来接受自定义属性
3.接受完了即可以在组件里直接使用 ,但是只能用不能改
<div id='app1'>
这里是实例
{
{money}}
<hr>
<!-- 在tp1组件标签上使用 xixi自定义属性 -->
<tp1 :xixi='money'></tp1>
</div>
<!-- 组件模板 -->
<template id='tp1'>
<div class='tp1'>
这里是组件
{
{xixi}}
</div>
</template>
<script>
Vue.component('tp1',{
template:'#tp1',
data(){
return{
hehe:123
}
},
props:['xixi'] //接收自定义属性
let vm1 = new Vue({
el:'#app1',
data:{
money:'资产'
}
})
</script>
子父组件通信
子组件控制父组件的数据,父组件控制自己的数据变化,将控制函数通过emit自定义事件传递子组件,