Vue 父子页面数据双向绑定

Father.vue

<template>
    <view>
        <view @click="show">我是父组件按钮</view>
        <child :isShow.sync="isShow" v-if="isShow"></child>
    </view>
</template>
<script>
import child from "./child.vue"
export default{
    data(){
        return{
            isShow:false
        }
    },
    components:{
        child
    },
    methods:{
        show(){
            this.isShow=true;
        }
    }
}
</script>

child.vue

<template>
    <view>
        我是子页面
        <view @click="upIsShow">我是子组件按钮</view>
    </view>
</template>
<script>
    export default{
        methods:{
            upIsShow(){
                this.$emit("update:isShow",false);
            }
        }
    }
</script>

 

posted @ 2020-05-31 16:20  joesmile  阅读(611)  评论(0编辑  收藏  举报