极客观点
项目管理
HarmonyOS
看到vue子组件像父组件传递数据的方式是：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<!-- 子组件向父组件传递数据 -->
<div id="box">
<v-parent></v-parent>
</div>
<!-- 父组件模板 -->
<template id="parent">
<div>
<span>{{msgParent}}</span>
<v-child @child-info="get"></v-child>
</div>
</template>
<!-- 子组件模板 -->
<template id="child">
<div>
<button @click="send">send</button>
<!-- <p>{{msgChild}}</p> -->
</div>
</template>
<script type="text/javascript">
var app = new Vue({
el:'#box',
components:{
// 父组件
'v-parent':{
data() {
return {
msgParent:'hello'
}
},
template:'#parent',
methods:{
get(msg){
this.msgParent = msg
}
},
// 子组件
components:{
'v-child':{
data(){
return {
msgChild:'child'
}
},
template:'#child',
methods:{
send(){
this.$emit('child-info',this.msgChild)
}
}
}
}
}
}
})
</script>
</body>
</html>看起来就是子组件设置点击事件，然后传值 父组件用参数接收
那这个实现原理是什么 是不是说必须要点击子组件才能进行数据传递？
因为子组件进行传值其父组件应该有一个触发条件
而去知道何时触发可以进行监听在这里你可以使用点击事件也可以是其他的事件
子组件向父组件传递值如果需要父组件去进行显示 那么这个显示条件或者说值得获取一定要有触发的
而原理呢就是事件监听
也可以说是发布订阅模式