标签：fatherData setup toRefs value vue3.0 props 组件

Vue3.0 props

1.你是否遇到了,引用props数据报错的问题？

在Vue3.0中,采用了proxy，让很多数据不能直接引用，多的不说直接上解决方法

首先引入toRefs import { toRefs } from "vue"; 
props:{ 
        str:String,
        obj:Object,
        num:Number 
      } 
setup(props){ 
     //让后在setup中将用toRefs把props转化成被ref包裹的数据 
     const { str, obj} = toRefs(props); 

     //这样你就可以在setup中使用str 和 obj两个值了  
     let mystr = str.value;
     let myobj = obj.value; 
     //记住使用时要用 .value ； 

     return {
       props
     }
}

2.实现父子组件数据双向绑定，可以双向修改

在父组件中

//template部分

<template>
 <sin-table @handleGetData = "getData" :fatherData="fatherData" />
 //通过vue数据传递原理把fatherData传给子组件 
</template>

//script部分

import {ref} from "vue"
setup(){
  let fatherData = ref('');
  const getData = (data) => {
    fatherData.value = data;  //这里是通过子组件传过来的数据修改fatherData；
  }
}

在子组件中

//script部分

props:{ fatherData:String } 
setup(props,ct) { 

  const changeChildData = (childData) = { 

    //通过emit把childData传给父组件  
    ct.emit("handleGetData",childData); 
    //这样就实现了，父子组件的双向数据绑定  

  }

  return { props } 
}

如果fatherData为Object数据,内部子集内容可以直接在子组件中修改,或通过v-model修改

例如：
import {toRefs} from "vue";
props:{ fatherData:Object };
setup(){
  const {fatherData} = toRefs(props);
  fatherData.value[0].name = '新狗';
  return {
    props
  }
}

标签：fatherData,setup,toRefs,value,vue3.0,props,组件
来源： https://www.cnblogs.com/xiaoshanmuyu/p/14882836.html

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