vue3 父子元件雙向資料繫結
阿新 • • 發佈:2021-09-07
子元件:./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>