最近一个项目，前端用了VUE3，由于一直做后端开发，并没有深厚的前端功底，现在用VUE3实在是吃力。经过了两天的折腾，在组件这里 终于有了一点经验，赶紧记下来，以便后边使用

1.先说几个细节的理解

• 定义单页面组件有很多种方法，在vue3中，推荐合成代码的方式开发，也就是基本上都写在setup（）方法中的那种。
• 关于 ref ，例如：cost a=ref(1);这句话可以简单理解成：定义了一个可响应的a。你可以把它想象成开辟了一个持久的内存空间，存了一个可响应的变量a,如果要给a赋值，应该是a.value=2;而不是a=ref(2),因为这样相当于给a换了一个内存地址。定义单值响应式变量使用ref,结构变量要使用reactive。
• setup中的return ，setup中返回，可以理解为对外暴露数据和方法，暴露有什么用？你暴露了别人才能看得到，拿得到，是为了方便别人读你的数据的。因为任何一个单页面vue都可以看成一个组件，而组件对外的暴露，方便父组件拿值。

2.组件的定义和组件间的传值

假设有两个组件，A是父组件，B是子组件

A向B传值靠Props属性（父组件向子组件传值）：

在子组件中定义props属性

//在子组件中定义一个属性 Ids
 props: {
    Ids: Array | Object | number,
  }


//在父组件中，通过属性给Ｂ传值
//父组件模板代码大致如下
<B :Ids="myid" />

//myid 是父组件中定义的一个变量

 而这种方法传递静态的值是ＯＫ的，所谓的静态就是界面只重画一次，值在逻辑中间基本上也没有变化。

而传递动态的值就会有问题，所谓的动态值有两层含：

1. 在父组件中传过去的值myid是不断变化的；
2. 是在子组件中需要根据传过来的属性值重画界面。这个看上去比较简单，事实上并不简单。子组件往往只响应第一次接收到属性值（至少我实验了几次都是这样）。

动态传值可以用watch来监控prop属性的变化，然后达到界面重画的目的。

 

//使用toRefs变换属性 到变量 a
//a变化了 说明属性变换了，然后将catavalue的值进行变换
//由于catavalue是响应式变量，catavalue变化，界面也就变了

let a= toRefs(props).Ids;
    watch(a, (newValue, oldValue) => {
      if (newValue) {
        console.log("组件中的属性变化了", newValue, oldValue);
        catavalue.value = newValue;
      }
    });

那么你可能会问，为什么不能将 子组件的变化直接反应到 属性Ids上面，而非要再定义一个响应式变量catavalue呢？

这是因为，属性具有稳定行，他代表着从父组件来的原始值，如果直接用于逻辑处理，可能会导致混乱和原始值得丢失。另外，属性的变化所导致的界面重画变量往往不是只有一个，可能会有很多个。因此，一般会多定义几个中间变量，以便让业务逻辑看上去更清晰。

B向A传值有两种方法（子组件向父组件传值）：

一种是主动传值（在子组件中召唤父组件的方法，并把值传过去，使用emits方法传递）

//在子组件中，变量发生变化，召唤父组件的getCatas方法
//父组件中需要定义同名方法getCatas，并设置对应的回调函数
watch(catavalue, () => {
    context.emit("getCatas", catavalue.value);
});

 

//父组件中的接收
<B  @getCatas="huidiaofunc" />

<script>
//在代码中定义回调函数
function huidiaofunc(参数)
{
    //参数个数，类型要与子组件里定义的声明保持一致
    //这里其他逻辑
}

</script>

另外一直是被动传值，即我不传值，谁引用我谁自己就去读取我的值

 

//父组件中模板大概这样写

<B  ref="butRef" />

//父组件中对应的代码
<script>
let butRef = ref(null);

let myvalue= = butRef.value.catavalue;

//catavalue 就是子组件中对外暴露的一个变量，如果子组件中对外没有暴露catavalue,那么这里是没有办法取到的

</script>

可以看到，这里在模板中也使用了 ref ，但是这个东西与定义变量的 ref(1)是有区别的，我个人理解，模板中的是引用定义，ref(1)是赋值定义，而本质上都是定义，本质上就是要将变量变成可响应的变量。 

总之：VUE3的文档 我感觉讲得还是不够详细，有些地方不够直观，纸上得来终觉浅 要知此事需躬行。