目录
父传子
- 父组件中给子组件绑定属性
- 子组件内部通过 props 选项接收
-
传固定值
<script setup>
//局部组件(导入进来就能用)
import SonCom from '路径'
</script>
<template>
<div>
<h3>父组件</h3>
<!-- 给子组件,添加属性的方式传值 -->
<SonCom sport="跑步"></SonCom>
</div>
</template>
<script>
//子组件
//defineProps接收
const props = defineProps({
sport: String
})
</script>
<template>
<!-- 对于props传递过来的数据,模版中可以直接使用 -->
<div>{{ sport }}</div>
</template>
-
传入响应式数据
<script setup>
//父组件
import {ref} from 'vue'
//局部组件(导入进来就能用)
import SonCom from '路径'
const num = ref(10)
const getAdd = () => {
num.value += 1
}
</script>
<template>
<div>
{{ num }}
<button @click="getAdd">加速</button>
<!-- 给子组件,添加属性的方式传值 -->
<SonCom sport="跑步" :add="add"></SonCom>
</div>
</template>
<script>
//子组件
//defineProps接收
const props = defineProps({
sport: String,
num:Number
})
</script>
<template>
<!-- 对于props传递过来的数据,模版中可以直接使用 -->
<div>{{ sport }} --- {{ num }}</div>
</template>
子传父
- 父组件中给子组件标签通过@绑定事件
- 子组件内部通过 emit 方法触发事件
<script>
//子组件
……
const emit = defineEmits(['change'])
const cut = () => {
// 触发自定义事件,并传递参数
emit('change',2)
}
……
</script>
<template>
<!-- 对于props传递过来的数据,模版中可以直接使用 -->
<div>{{ sport }} --- {{ num }}
<button>减速</button>
</div>
</template>
<script setup>
//父组件
……
const changeFn = (newCut) => {
num.value = newCut
}
……
</script>
<template>
<div>
{{ num }}
<button @click="getAdd">加速</button>
<!-- 给子组件,添加属性的方式传值 -->
<SonCom @change = "changeFn" sport="跑步" :num="num"></SonCom>
</div>
</template>