一、不使用<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>