Vue3中是否使用＜script setup＞父子传参的不同

一、不使用<script setup>

（一）父组件中引入子组件

1.需要先导入子组件

import child from "../components/child"

2.与name同级的components：{ }中定义子组件

export default {
  name: "father",
  components:{
    child:child
  }
}

3.把子组件当做标签使用

<template>
  <div>
    <child></child>
  </div>
</template>

（二）父传子

1.父组件中

（1）在父组件的setup（）{ }中定义要传递的数据，并导出

setup(){
    let dataValue = "父组件传递的数据"
    return {
      dataValue
    }
  }

（2）在子组件标签上用冒号绑定一个变量名（子组件接受的变量名），等号后面为父组件要传递的数据

<child :data="dataValue"></child>

 2.子组件中

（1）在子组件中与name同级的props：{ }中，写成对象形式，前面为父组件中定义好的变量名，后面可以直接跟类型，也可以跟对象{type：类型,default：默认值}

export default {
  name: "child",
  props:{
    data:String
  }
}

（2）在子组件的setup（）{ }中，有一个props的参数，在props中有所有传递过来的数据，通过点属性的方式即可拿到，然后进行后续操作

export default {
  name: "child",
  props:{
    data:String
  },
  setup(props) {
    console.log(props.data)
  }
}

（3）若要在子组件的内容中直接渲染传递过来的数据，直接写传递时的数据名称即可

<template>
  <div>
    {{data}}
  </div>
</template>

（三）子传父

1.父组件中

（1）在使用的子组件的标签上通过@绑定一个自定义事件类型（子组件调用的事件类型），后面绑定一个事件

<template>
  <div>
    <child :data="dataValue" @toFather="fromChild"></child>
  </div>
</template>

（2）在父组件的setup（）{ }中定义并导出这个事件，该事件有一个参数（data），该参数即为子组件传递过来的数据

setup(){
    let dataValue = "父组件传递的数据"
    let fromChild = (data) => {
      console.log(data)
    }
    return {
      dataValue,
      fromChild
    }
  }

2.子组件中

（1）子组件的setup（）{ }中除了props还有一个context的参数（上下文环境），通过该参数下的emit即可执行父组件的事件

setup(props,context) {
    console.log(props.data)
    context.emit('toFather','子组件传递的数据')
  }

注意：context.emit（“参数一”，“参数二”）

                参数一：为父组件中预先定义好的事件类型

                参数二：为子组件向父组件传递的数据

二、使用<script setup>

（一）父组件中引入子组件

1.通过import引入子组件

import setupChild from '../components/setupChild'

2.把子组件当做标签使用

<template>
  <div>
    <setupChild></setupChild>
  </div>
</template>

（二）父传子

1.父组件中

（1）在父组件的<script setup> </script>标签中定义要传递的数据

<script setup>
import setupChild from '../components/setupChild'
let data = "父组件的信息"
let list = [1,2,3]
</script>

（2）在子组件标签上用冒号绑定一个变量名（子组件接受的变量名），等号后面为父组件要传递的数据

<template>
  <div>
    <setupChild :data="data" :list="list"></setupChild>
  </div>
</template>

2.子组件中

（1）通过 defineProps 来接收父组件传来的参数，defineProps 中的参数为一个数组，数组的成员名称为父组件传递来的名称

<script setup>
// eslint-disable-next-line no-undef
  const props = defineProps(['data','list'])
</script>

（2）在标签中使用时，可以用props来接收使用时为props.名称，或者直接写参数名称即可，但是在script标签中要进行操作时，必须写props.名称才可以拿到，直接写名称是不可行的

<template>
  <div>
    {{data}}
    {{props.data}}
    <div>{{list}}</div>
  </div>
</template>

（三）子传父

1.父组件中

（1）在父组件中使用的子组件标签上通过@符号绑定一个自定义事件类型，等号后面为父组件中的事件

<template>
  <div>
    <setupChild @toFather="fromChild"></setupChild>
  </div>
</template>

（2）在父组件的script标签中声明对应的事件方法

<script setup>
  import setupChild from '../components/setupChild'
  function fromChild (data) {
    console.log(data)
  }
</script>

2.子组件中

（1）通过 defineEmits 来获取父组件中的事件类型， const emit = defineEmits(['toFather'])

<script setup>
  // eslint-disable-next-line no-undef
  const emit = defineEmits(['toFather'])
</script>

（2）通过emit来调用父组件的方法，进行传递数据，第一个参数为父组件对应的自定义事件类型，第二个参数为要传递的数据

<script setup>
  // eslint-disable-next-line no-undef
  const emit = defineEmits(['toFather'])
  emit('toFather','子组件传递的值')
  emit('toFather',[4,5,6])
</script>

（3）若要在子组件标签中直接写事件触发父组件中的事件，可以通过$emit来直接触发

<button @click="$emit('toFather','标签传递的子组件的值')">传递</button>