子父组件传递数据
父组件===》子组件。父组件通过props向子组件中传递数据和改变数据的函数，通过在子组件中调用父组件传过来的函数，达到更新父组件数据（向父组件传递数据）的作用（子组件中需要有相应的响应事件）.
子组件===》父组件。通过在子组件中触发一个 自定义事件（vm.
emit方法的参数，回传给父组件用v-on：[自定义事件]监听的函数.如：
<!--父组件 -->
<template>
<div class="container">
<child-template @toggleFn="myToggle"></child-template> <!--子组件 -->
</div>
</template>
myToggle(params ){
console.log(params);
}
<!--子组件 -->
<template>
<div class="container">
<div @click="toggle">点击子组件</div>
</div>
</template>
toggle(){
let params = "传递参数";
this.$emit("toggleFn",params)
}
3.通过ref对子组件做标记，父组件可以通过this.﹩refs.[子组件的ref].[子组件的属性/方法]这种方式直接取得子组件的数据或者调用方法
如this.﹩ref.mark.data ，this.﹩ref.mark.fun();
父子组件实时传递数据
1.父组件通过通过props 给子组件传递对象 数据，子组件再以函数的形式接收，当子组件数据改变时，父组件也会相应改变，如：
<!--父组件 -->
<template>
<div class="container">
<child-template :data="myData"></child-template> <!--子组件 -->
{{myData.name}}
</div>
</template>
data() {
return {
myData:{
name:"小明"
}
}
}
<!--子组件 -->
<template>
<div class="container">
<div @click="toggle">{{data.name}}</div>
</div>
</template>
export default {
props: {
data: {
type: Object,
default: () => {}
},
},
data() {
return {
name:小刚,
}
},
methods:{
toggle(){
data.name = name；
}
}
}
