VueJs中setup的使用(下)

最新推荐文章于 2024-08-05 17:49:42 发布

itclanCoder

最新推荐文章于 2024-08-05 17:49:42 发布

阅读量1.7k

点赞数 1

文章标签： vue.js javascript 前端 ecmascript 前端框架

本文链接：https://blog.csdn.net/wzc_coder/article/details/128463018

版权

本文详细探讨了VueJs中`setup`函数的使用，包括如何接收和修改父组件传递的值。在`setup`中，父组件通过属性向子组件传递数据，子组件需通过`props`接收并处理。同时，介绍了如何在`setup`中定义响应式变量和函数，以及`setup`的第二个参数`context`的用途，包括`context.props`、`context.emit`和`context.slots`。文章总结了在组合式API与选项式API中处理父子组件通信的不同方式，强调了响应式处理和避免解构`context`对象的重要性。

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

前言

在Vue当中,父组件想要向子组件传值,是通过在父组件标签上通过自定义属性实现的,而在子组件中是通过props进行接收

在Vue2.0里面,在子组件中的选项式API配置项选项中props进行接收就可以了的,在子组件中的模板中可以直接使用

但在Vue3里面与Vue2.0存在一些差异,这个主要是针对组合式API的setup函数

setup函数接收第一个参数props

setup函数的第一个参数是接收父组件传递过来的props,这个setup函数的props是响应式的,并且会在传入的新的props时同步更新

如下是父组件的数据

<script setup>
import  Comp  from "./Comp.vue"
import { ref } from 'vue'
const name = "https://coder.itclan.cn"
</script>

<template>
  <Comp :name="name" />
</template>

如下是子组件Comp.vue

export default {
    props: {
        name
    },
    setup(props) {
        console.log(props.name);
    }
}

在模板中渲染

<template>
  <h1>{
   {name}}</h1>
</template>

那如何去修改模板中的数据呢,这个与Vue2.0绑定事件一样,在模板中,通过v-on或@进行绑定,函数则通过function定义在setup里面,同时返回出去

<template>
  <h1>{
   {name}}</h1>
  <button @click="handleChange">修改</button>
</template>

对应的js

<script>
 import { ref } from 'vue'
 export default {
   props: {    // 必须要声明接收才可以,否则页面数据不会显示
     name
   },
   setup(props){
     console.log(props.name);
     let name = ref(props.name);   // 相当于是对props传递过来的数据做了一份拷贝
     function handleChange() {
        console.log(name.value);
        name.value = "川川"
     }
     return {
       name,
       handleChange
     }
   }
 }
</script>

注意事项

[1]. 想要修改父组件传递过来的props值,接收到的props.name必须要使用ref进行响应式处理,否则的话,修改name