Vue中父子通讯的基本解决方案

最新推荐文章于 2024-08-15 19:41:48 发布

-布吉岛呀-

最新推荐文章于 2024-08-15 19:41:48 发布

阅读量163

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2301_80045499/article/details/136016733

版权

本文详细介绍了Vue中父组件如何向子组件透传非响应式数据以及通过事件携带参数的方式双向通信，包括组合式和选项式编程示例。

摘要由CSDN通过智能技术生成

一、父组件向子组件传递：

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>