zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Codeforces Round #456 (Div. 2)
    Codeforces Round #455 (Div. 2)
    Codeforces Round #453 (Div. 1)
    Codeforces Round #450 (Div. 2)
    退役了
    退役了
    这个博客不想要了
    Hello!The familiar and strange world.
    真正的退役了。
    bzoj4231: 回忆树
  • 原文地址:https://www.cnblogs.com/finghi/p/15237424.html
Copyright © 2011-2022 走看看