一、父组件向子组件传递:
1、核心方法:
父组件渗传特性
2、父组件代码:
<templete>
<son :list='listData'></son> //父组件向子组件透传listData列表
</templete>
3、子组件代码:
a、组合式:
<script setup>
import { useAttrs } from 'vue'//使用useAttrs方法获取透传数据
const attrs = useAttrs()
const list = attrs.listData
</script>
b、选项式:
<script>
export default{
props:{
list:Array//获取父组件渗传的list数据参数
}
}
</script>
4、注意点:
透传数据并非响应式数据,子组件无法获取父组件更改后的数据(考虑到性能)。若要响应式可以使用onUpdata实时获取。
二、子组件用事件携带参数方式向父组件传递list列表:
1、子组件代码:
a、组合式:
<script setup>
//定义变量
const title="title";
//定义方法触发事件并携带title数据
function add(){
this.$emits("add",title);
}
</script>
<templete>
//创建一个按钮调用方法触发事件
<div>
<button @click="add">add</button>
</div>
</templete>
b、选项式:
<script>
export default{
data(){
return {
title:"title"
}
},
methods:{
add(){
this.$emit("add",this.title);
}
}
}
</script>
<templete>
<div>
<button @click="add">add</button>
</div>
</templete>
2、父组件代码:
<script setup>
const title="";
function add(title){
this.title=title;
}
</script>
<templete>
<div>
//展示title
<p>{{title}}<p>
//按钮获取事件触发相应函数
<button :add="add">add</button>
</div>
</templete>