父传子:
父调用 绑定的子组件中state然后 mystate1赋值false 给子组件中的state。并在子组件中显示父中传来的值。
注意要在子组件中设置 props【属性】不然父中的值无法传过去。
<view >开启{{mystate1}}view>
--调用子组件mypop,并传值 "state"
<mypop :state.sync="mystate1" >mypop>
--在父组件中mystate1是false
data() {
return {
mystate1:false
};
},
接下来传值给子组件,并显示子组件中传的值"state"
<view>
<view>---弹出框--父-{{state}}--子{{state_sun}}view>
view>
template>
<script>
export default {
name:"mypop",
data() {
return {
};
},
props:{
state:{
type:Boolean,
default:true
},
state_sun:{
type:Boolean,
default:true
},
},
这里可以看出,子中state原状态为true,父传了false,最后在子组件中显示为false,同时子组件有个state_sun定义是true显示是true。
子传父:
只要加个$emit,然后加上参数和值
父中的页面:
定义openMsg方法绑定给@getMsg,其中getMsg是子组件中的方法函数。通过@使用。
<comp :name="name" @getMsg="openMsg">comp>
然后写openMsg方法:打印传过来的值,msg是子组件中传来的值,msg是可以随意取的。
methods: {
openMsg(msg) {
console.log(msg)
}
}
子组件中
methods: {
sendMsg() {
//子传父
this.$emit('getMsg', "我是子,"+this.name);
}
}
父组件调用子组件的sendMsg方法,并绑定给自己的openMsg方法,然后子组件中传来的值 【“我是子,”+this.name】通过console打印出来。
子组件与父组件数据同步(.sync)
一般子与父数据同步用sync比较简单。
只要在 e m i t 中加个 u p d a t e 参数就可以了。可以认为父中 s t a t e 【 : s t a t e . s y n c = " m y s t a t e 1 " 】传值给子,子中的 s t a t e 显示 f a l s e ,然后子传值给父【 u p d a t e : s t a t e " , f a l s e 】,父中的 m y s t a t e 1 变成了 f a l s e 。只需要在父中添加 : s t a t e . s y n c ,子中添加 t h i s . emit中加个update参数就可以了。 可以认为父中state【:state.sync="mystate1"】传值给子,子中的state显示false ,然后子传值给父【update:state",false】, 父中的 mystate1变成了false。 只需要在父中 添加:state.sync ,子中添加 this. emit中加个update参数就可以了。可以认为父中state【:state.sync="mystate1"】传值给子,子中的state显示false,然后子传值给父【update:state",false】,父中的mystate1变成了false。只需要在父中添加:state.sync,子中添加this.emit(“update:state”,值)和属性 props:{ state:{ type:Boolean, default:true },
即可。
子组件中:
this.$emit("update:state",false)
父组件中
<button @click="clickBtn">开启{{mystate1}}button>
<mypop :state.sync="mystate1" >mypop>
这样子组件中的state中的值就给父组件。