vue3 父子組件雙向數據綁定

子組件：./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>