首页 > 其他 > 详细

vue3 父子组件双向数据绑定

时间:2021-09-07 15:38:00      阅读:24      评论:0      收藏:0      [点我收藏+]

子组件:./components/toolbar.vue

export default {
  name: "toolbar",
  props: {
    narrow:{
      type:Boolean,
      required:true,
     }
  },
  setup(props,context) {   
    var narrow =ref(props.narrow);
     watch(()=>props.narrow,(val)=>{//查看父组件传过来的值是否变化,从而修改值
     narrow.value=val
   });
    watch(()=>narrow.value,(val)=>{ //查看子组件值是否变化,在赋值给父组件
     context.emit(‘update:narrow‘,val)
   });
  function dd (){//修改子组件的值
    console.log(this.narrow)
    this.narrow=!this.narrow
  }
   return {
      narrow,
     dd
    };
  },
  
};
</script>        

父组件

<toolbar v-model:narrow="narrow"/>
<script lang="ts">
import { defineComponent,reactive,ref,toRefs } from "vue";
import toolbar from "./components/toolbar.vue";
export default defineComponent({
  name :‘App‘, 
  components: { toolbar },
  setup() {
    var data=reactive({      
      narrow:false,  
      but:()=>{     //修改父组件的值
      data.narrow=!data.narrow
    }
    });     
    return {
     ...toRefs(data)     
    };   
  },  
});
</script>

 

vue3 父子组件双向数据绑定

原文:https://www.cnblogs.com/finghi/p/15237424.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!