浅谈Vue3 父子传值

目录
  • 父传子：
    • 1、 在父组件的子组件标签上通过 :传递到子组件的数据名="需要传递的数据"
    • 2、子组件依旧通过 props 来接收并且在模版中使用
  • 子传父：
  • 总结

父传子：

1、 在父组件的子组件标签上通过 :传递到子组件的数据名="需要传递的数据"

在这里为了大家区分我将父组件中的数据定义为 ： fatherData  ，

子组件需要接收的数据定义为： sonData 。

// 父组件
<template>
  <div class="about">
    {{fatherData}}
    <!-- 父传子 -->
    <!-- 1、 在父组件的子组件标签上通过 :传递到子组件的数据名="需要传递的数据" -->
    <children :sonData="fatherData"></children>
  </div>
</template>

<script>
import children from "@/components/children"
import { defineComponent,reactive,toRefs } from "vue";
export default defineComponent({
  components:{
    children,
  },
name:"about",
setup(){
  const state = reactive({
    fatherData:"hello"
  })
  return {
    ...toRefs(state)
  }
}

})
</script>

2、子组件依旧通过 props 来接收并且在模版中使用

那么大多数情况下都会去通过父组件传递到子组件中的数据，根据这个数据去做一些特定的功能或者请求数据等等。

在 setup 钩子中第一个参数 props 就可以访问到父组件传递的数据，那么在函数中也是通过：  props.父组件传递数据的名称   来操作该数据。

setup函数接收props作为其第一个参数，props对象是响应式的(单向的父—>子)，watchEffect或watch会观察和响应props的更新。不要对props对象进行解构，那样会失去响应性。在开发过程中，props对象对用户空间代码时不可变的，用户尝试修改props时会触发警告。

// 子组件
<template>
  <div class="children">
    <!-- 3、在子组件模版中使用 -->
    {{sonData}}
  </div>
</template>
<script>
export default {
name:"Children",
// 2、子组件通过 props 来接收
  props:["sonData"],
  setup(props){
    function childrenbut(){
      // props.sonData  可以访问到父组件传递的数据
      console.log(props.sonData);
    }
    return {
      childrenbut
    }
  }
}
</script>

子传父：

1、子组件触发事件通过 setup 的第二个参数 context.emit 来实现子传父

context 上下文对象。

// 子组件
<template>
  <div class="children">
    {{sonData}}
    <!-- 1、触发事件 -->
    <button @click="childrenbut">子组件按钮</button>
  </div>
</template>
<script>
export default {
name:"Children",
  setup(props,context){
    function childrenbut(){
      console.log(context);
      // 2、通过context.emit 实现子传父
      // 第一个参数为 方法名，第二个参数为 需要传递的数据
      context.emit("change",'world')
    }
    return {
      childrenbut,
    }
  }
}
</script>

context 也可以使用结构的形式这样写

// 子组件
<script>
export default {
name:"Children",
  // 通过结构 之后直接写 emit {emit}
  setup(props,{emit}){
    function childrenbut(){
      // 省去 context.emit
      emit("change",'world')
    }
    return {
      childrenbut,
    }
  }
}
</script>

总结

在 vue3 中无论是父传子还是子传父其实与 vue2 中都相差无几，

思想大多一样，不一样的是 vue3 需要通过调用各种各样的钩子来实现传参

赞 (0)

相关推荐

  • vue父子组件的互相传值和调用

    1.父传值给子组件 父组件: <template> <div> <p class="father">父组件</p> <child :sid="id"></child> </div> </template> <script> import child from './child' export default { components: { child }, d

  • Vue父子组件传值的一些坑

    在用 Vue 的父子组件传值时遇到一个冷门的问题,子组件改变值后父组件的值也随之改变了,特此记录下原因和解决方式. 再系统梳理下 JavaScript 的深拷贝与浅拷贝相关知识点. 1. 问题描述 父组件传值给子组件,子组件改变传过来的值后,父组件的值也会跟着改变. 这个问题比较冷门,平时如果对组件通信使用得比较简单,一般不会遇到. 2. 原因剖析 核心:双向绑定 父子组件传值的时候涉及双向绑定,当传值为 object 类型时,传值之后数据源会被改变. 深拷贝与浅拷贝 下文详细讲. 3. 解决方

  • vue中父子组件传值,解决钩子函数mounted只运行一次的操作

    因为mounted函数只会在html和模板渲染之后会加载一次,但是在子组件中只有第一次的数据显示是正常的,所以需要再增加一个updated函数,在更新之后就可以重新进行取值加载,完成数据的正常显示. beforCreate(创建之前) Created(创建之后) beforMount(载入之前) Mounted(载入之后) beforUpdate(更新之前) Updated(更新之后) beforDestroy(销毁之前) Destroyed(销毁之后) activate(keep-alive组

  • Vue 组件的挂载与父子组件的传值实例

    1:将需要挂载的组件放置在component之中 2:全局挂载在main.js之中 import Vue from 'vue' import App from './App.vue' import getTime from './component/child/getTime' //全局注册 整个项目的组件都可以使用 //注册给整个vue 对象 //引入需要注册的全局组件 //在vue类的方法 component里面进行注册 Vue.component('v-times',getTime); V

  • vue父子组件传值以及单向数据流问题详解

    vue父子组件传值以及单向数据流问题详解

    目录 前言 1.父组件传值给子组件 2.子组件的 props 类型约束问题 (1)构造函数自定义类型 (2)自定义函数自定义类型 3.单向数据流问题 总结 前言 我们知道 vue 中父子组件的核心概念是单向数据流问题,props 是单向传递的.那究竟什么是单向数据流问题,这篇文章来总结一下关于这个知识点的学习笔记. 1.父组件传值给子组件 <div id="app"> <blog-item :title="title"></blog-i

  • 浅谈Vue3 父子传值

    目录 父传子: 1. 在父组件的子组件标签上通过 :传递到子组件的数据名="需要传递的数据" 2.子组件依旧通过 props 来接收并且在模版中使用 子传父: 总结 父传子: 1. 在父组件的子组件标签上通过 :传递到子组件的数据名="需要传递的数据" 在这里为了大家区分我将父组件中的数据定义为 : fatherData  , 子组件需要接收的数据定义为: sonData . // 父组件 <template> <div class="a

  • 浅谈Vue父子组件和非父子组件传值问题

    本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue <template> <div class='tmpl'> goodsList组件 </div> </template> <style> </style> <script> export default { data() { return{} }, creat

  • 浅谈Vue3 Composition API如何替换Vue Mixins

    想在你的Vue组件之间共享代码?如果你熟悉Vue 2 则可能知道使用mixin,但是新的Composition API 提供了更好的解决方案. 在本文中,我们将研究mixins的缺点,并了解Composition API如何克服它们,并使Vue应用程序具有更大的可伸缩性. 回顾Mixins功能 让我们快速回顾一下mixins模式,因为对于下一部分我们将要讲到的内容,请务必将其放在首位. 通常,Vue组件是由一个JavaScript对象定义的,它具有表示我们所需功能的各种属性--诸如 data,m

  • 浅谈Vue3.0新版API之composition-api入坑指南

    关于VUE3.0 由于vue3.0语法跟vue2.x的语法几乎是完全兼容的,本文主要介绍了如何使用composition-api,主要分以下几个方面来讲 使用vite体验vue3.0 composition-api解决了什么问题 语法糖介绍 vite的安装使用 vite仓库地址 https://github.com/vuejs/vite 上面有详细的安装使用教程,按照步骤安装即可 composition-api解决了什么问题 使用传统的option配置方法写组件的时候问题,随着业务复杂度越来越高

  • 浅谈vue3在项目中的逻辑抽离和字段显示

    目录 逻辑分层 将各个区域业务分开 这样做的优势 这样的场景应该如何处理 优化 reactive 不一定非要写在setup函数中 如何在页面上直接显示值 逻辑分层 我们在使用vue3开发项目的时候, 如何进行[区域分层]呢???? 举一个简单的小粒子 一个区域有[查询逻辑.修改后的保存逻辑.新增逻辑.删除逻辑] 这个页面可能还有其他的区域.A区域.B区域,C区域...[有很多逻辑] 这个时候我们可以将一个区域的逻辑分离出去 将各个区域业务分开 export default { setup ()

  • 浅谈Vue3 defineComponent有什么作用

    浅谈Vue3 defineComponent有什么作用

    目录 defineComponent重载函数 开发实践 defineComponent函数,只是对setup函数进行封装,返回options的对象: export function defineComponent(options: unknown) { return isFunction(options) ? { setup: options } : options } defineComponent最重要的是:在TypeScript下,给予了组件 正确的参数类型推断 . defineCompo

  • 浅谈Vue3的几个优势

    目录 1.源码 1.1 monorepo 1.2 TypeScript 2.性能 2.1 优化源码体积 2.3 Proxy 2.4 Composition API Vue2已经非常优秀,且具备完善的社区和生态,但是Vue3仍然在源码.性能和语法 API 三个大的方面进行了优化 1.源码 1.1 monorepo 源码管理方式采用monorepo的方式进行管理,monorepo 把这些模块拆分到不同的 package 中,每个 package 有各自的 API.类型定义和测试.这样使得模块拆分更细

  • 浅谈Vue3中watchEffect的具体用法

    前言 watchEffect,它立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数. 换句话说:watchEffect相当于将watch 的依赖源和回调函数合并,当任何你有用到的响应式依赖更新时,该回调函数便会重新执行.不同于 watch,watchEffect 的回调函数会被立即执行(即 { immediate: true }) 此文主要讲述怎样利用清除副作用使我们的代码更加优雅~ watchEffect的副作用 什么是副作用(side effect),简单的说副作用

  • 浅谈vue3中ref、toRef、toRefs 和 reactive的区别

    目录 一.ref——定义任意类型响应式数据 二.reactive——定义响应式对象 三.toRef——将一个 reactive 转化为一个 ref 四.toRefs——将多个 reactive 自动解构为多个 ref 一.ref——定义任意类型响应式数据 ref 能定义“任何类型”的响应式数据(ref 在 vue3 中指响应式数据). 参数可以传入任意数据类型. 使用 ref 定义的属性必须通过 .value 的形式才能修改其值.属性的值一旦被修改就会触发模板的重新渲染以显示最新的值. 对于在

  • 浅谈vue父子组件怎么传值

    背景:最近在做vue的项目,因为页面的逻辑比较复杂,代码量较多,所以就想抽离出一些组件放到component里面.问题就随之来了. 因为vue不提倡在子组件中修改父组件的值,所以如果要这样操作的话就要麻烦一步,而我正好需要这样的操作,于是就查阅了资料 上父组件的代码,引用了exp-group子组件 <exp-group :grpVisible="grpVisible" :grpData="grpData" @updateData="acceptDat

随机推荐