标签：val 绑定 vue3 组件 narrow data props toolbar

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

标签：val,绑定,vue3,组件,narrow,data,props,toolbar
来源： https://www.cnblogs.com/finghi/p/15237424.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。