Vue3中父子组件的传值问题

父子组件传值

在Vue3中如果想对子组件进行传值操作，则需要首先在const中定义多个响应式参数，必须记住的是，定义了响应式参数之后一定要在setup中return该参数，否则上面的template中不会识别，然后在template中定义

<subTableAModule 
    :area="areaA"
    :carNum="carNum"
/>

其中area是传参的第一个参数的名字，areaA是下面的响应式变量，使用前面的冒号可以将其动态绑定在script中的areaA上。这样就实现了script和template之间的交互，切记切记。相当于
v-bind:area="areaA"
即areaA这个字符串在这里会直接绑定script中的areaA响应式对象。

setup() {
  const areaA = ref('A');
  const areaB = ref('B');
  const carNum = ref(1)
  --------省略线---------
  return {
    areaA,
    areaB,
    carNum,
  }
}
  

在子组件中，进行如下操作进行接收：

export default {
    props:{
        area:{
            type: String,
            required: true
        },
        carNum:{
            type: Number,
            required: true
        },
    },
    // name: 'stockList', components: { TestModule, BugModule, AgeModule, },
    setup() {

很有意思的是，props是不需要放在setup中的，实际上变量的形式和放不放在setup中其实关系不大。
在子组件的template中，就可以这样写（别忘了双引号），能够被正常识别

<el-table-column :label="area" align="center">

{{ }}模板插值语法和v-bind之间的区别

{{x}}只能在标签之间，其会被Vue渲染为x变量的当前值，而当x的值发生变化时，模板中的对应部分也会发生更新。不能用在标签内部！！
例如：

<p>{{x}}</p>
// 在上文的情况下，是可以进行渲染的
<el-table-column label={{x}} align="center">
// 而在标签中的时候，是无法被识别且被渲染为变量x的

:即v-bind则只能用于标签内部，:lable="x"会使x变量动态绑定label，注意双引号别忘了。
例如：

<el-table-column :label="x" align="center">
//在标签中上文是可以识别的