vue3 父子组件间相互传值方式

目录
  • vue3父子组件相互传值
    • 父向子传值
    • 子组件向父组件传值
  • vue3父子组件传值的注意事项
    • 解决办法:两种

vue3父子组件相互传值

父向子传值

<pie-chart :pieData="post_data.pid" />

父组件只需在子组件上声明一个变量即可。 :代表变量,可以传变量;否则只能传常量

export default {
    props:['pieData'],
    setup(props,ctx) {
        const pie_data = props.pieData

子组件中需要在props中声明需要接收的变量名,setup中需要引用props,赋值时用props.变量名接收。return出去就可以用了

子组件向父组件传值

<submit class="submit" @e_flag="get_e_flag" />
 
const e_flag = ref(false);
    const get_e_flag = (e) => {
      e_flag.value = e;
    };

父组件需要声明一个@方法get_e_flag接收子组件发送的值,在该方法中赋值给需要的变量

setup(props, ctx) {
    ……
    const spyder_go = () => {
        ctx.emit('e_flag',e_flag.value)

子组件中需要在setup中使用ctx,使用ctx.emit向父组件传值。该方法需要调用,比如点击或者onMounted

vue3父子组件传值的注意事项

当你在进行父子组件传值的时候报警告:

Property “value” was accessed during render but is not defined on instance.
at

warn]: Extraneous non-emits event listeners (xxx) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the “emits” option.
at <ChilDen title=“” msg=“ooooo” onXxx=fn >
at

然而在vue2中就不报这个警告。

解决办法:两种

1.在接收的参数后边跟上类型就OK(ts)

2.用emits:[‘接收你推送的事件’](js)

以下是代码分析

我用的是 ts+vue3

首选我们对比vue2来看,vue3在写法发生了不小的变化,最典型的例子就是vue3通过ref,或者reactive实现数据的响应式。因为ref和reactive的出现,使得vue3中父子组件的传值方式也发生了变化

咱们先看下vue2中的写法

父子组件传值 props / this.$emit

  • 父组件向子组件传值:在子组件标签上绑定自定义属性名(:child = ‘value’),值是父组件要传递的数据,在子组件内部通过props 属性来接收 ‘自定义属性名’,页面在展示上,通过接收的 {{属性名}} 显示。(父子之间是上下传值)
  • 子组件向父组件传值:在子组件标签上绑定自定义事件(@change= ‘change’),子组件内部通过 $emit 给该事件推送数据 (this. $emit(‘绑定的自定义事件名’,this.数据))。父组件内部通过“函数参数”接收。(子组件之间是平行传值)

父组件

<template>
  <div>
    <children :title="title" @getChildren="getChildren"></children>
    <div>子组件说: {{ childrenAsk }}</div>
  </div>
</template>
<script>
  import children from "./children.vue"
  export default {
    data() {
      return {
        title: "我是父组件传过来的值",
        childrenAsk: "" // 接收子组件传值的赋值
      }
    },
    methods: {
      getChildren(val) {
        this.childrenAsk = val
      }
    }
  }
</script>

子组件

<template>
  <div>
    <div>父组件传过来的值: {{ title }}</div>
    <button @click="askToFather">点击发送给父组件</button>
  </div>
</template>
<script>
  export default {
    props: {
      title: {
        type: String
      }
    },
    data() {
      return {
        askMsg: "这是我给父组件说的话"
      }
    },
    methods: {
      askToFather() {
        this.$emit("getChildren", this.askMsg) // 推送的的自定义事件
      }
    }
  }
</script>

但是vue3中,是不存在this的,vue3中将数据和函数都封装在了setup中,那么vue3是怎么实现的呢?

我们知道vue3中的setup接收两个参数,

  • 第一个参数是props,即父组件向子组件传递的props值,
  • 第二个值为context,这个值代表了当前的上下文对象,

知道这个东西以后现在来实现vue3的父子组件传值。

vue3中父传子和vue2中的父传子一样,再次不做过多阐述,下面重点关注的是vue3的子传父

父组件

<template>
  <div style="color: aqua">父组件</div>
  <button @click="uodata">给子组件</button>
  <h4>子传过来的-- {{ children_msg }}</h4>
  <hr />
  <Children :title="msg" :msg="datamsg" @xxx="hh"></Children>
  {{ value }}
</template>
<script lang="ts">
	import Children from "./components/ChilDen.vue";
	import { defineComponent, ref } from "vue";
	export default defineComponent({
	  components: {
	    Children,
	  },
	  name: "App",
	  setup() {
	    let msg = ref("");
	    let datamsg = ref("ooooo");
	    function uodata() {
	      msg.value = msg.value + "44";
	    }

	    // ref的作用是实现响应式, 如果没有ref则不能实现响应式(引用数据类型用reactive)
	    let children_msg = ref("");
	    console.log(children_msg, "children_msg");
	    function hh(val: string) {  // 警告解决办法: 加类型
	      console.log(val, "val");
	      // 使用ref包裹的数据,需要通过 .value 的形式访问他的值
	      children_msg.value = val;
	    }
	    return {
	      msg,
	      datamsg,
	      uodata,
	      hh,
	      children_msg,
	    };
	  },
	});
</script>

子组件:

<template>
  <div style="color: brown">子组件</div>
  <div>父组件传过来的值为:{{ title }}-- {{ msg }}</div>
  <button @click="emitxx">给父组件</button>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "ChilDen",
  props: {
    title: {
      type: String,
    },
    msg: {
      type: String,
    },
  },
  setup(prop, context) {
    // props 参数,是一个对象,里面有父级组件向子组件传递的数据,
    // 且是在子组件中使用props接收到的所有的属性
    // 包含props 配置声明且传入了的所有属性的对象
    console.log(prop, context);
    // context.attrs 可以查询到在props中没有定义的属性
    // console.log(context.attrs.msg);
    function emitxx() {
      let ask = "nihao";
      // context作用是获取上下文对象,
      // 如果setup写法为setup(props, { emit })的方式的话,下面的context可以省略
      context.emit("xxx", ask);
    }
    return {
      emitxx,
    };
  },
});
</script>

看下效果

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vue3父子组件传值中props使用细节浅析

    目录 setup函数的参数 一.父组件要给子组件传值时,可以通过props来完成组件的通信 二.子组件给父组件传值 总结 setup函数的参数 它主要有两个参数: 第一个参数:props :父组件传递过来的属性会被放到props对象中 第二个参数:context:包含3个属性 attrs:所有的非prop的attribute slots:父组件传递过来的插槽(这个在以渲染函数返回时会有作用,后面会讲到) emit:当我们组件内部需要发出事件时会用到emit 一.父组件要给子组件传值时,可以通过p

  • vue3 父子组件传值详解

    现在距离vue3的诞生已经过了很长时间了,笔者也是近期才开始学习vue3.对比vue2来看,vue3在写法发生了不小的变化,最典型的例子就是vue3通过ref,或者reactive实现数据的响应式.因为ref和reactive的出现,使得vue3中父子组件的传值方式也发生了变化 咱们先看下vue2中的写法 父组件: <!-- 父组件 --> <template> <div> <children :title="title" @getChildr

  • 详解vue3中的非父子组件传值

    目录 App.vue sub1.vue sub2.vue 总结 vue2中非父子组件的传值主要是通过事件总线,创建一个vue实例,通过在不同的组件中导入该实例来实现非父子组件之间的通信行为. vue3提供了**provide**和**inject**属性,可以实现非父子组件之间的通信: 假设有三个组件:App.vue(父级).sub1(子级).sub2(子级的子级): App.vue <template> <div style="border: 1px solid pink&q

  • vue3 父子组件间相互传值方式

    目录 vue3父子组件相互传值 父向子传值 子组件向父组件传值 vue3父子组件传值的注意事项 解决办法:两种 vue3父子组件相互传值 父向子传值 父 <pie-chart :pieData="post_data.pid" /> 父组件只需在子组件上声明一个变量即可. :代表变量,可以传变量;否则只能传常量 子 export default {     props:['pieData'],     setup(props,ctx) {         const pie_

  • vue 进阶之实现父子组件间的传值

    本章我们将深入了解一下组件,并实现父子组件间的传值. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head&g

  • 详解react hooks组件间的传值方式(使用ts)

    目录 父传子 子传父 跨级组件(父传后代) 父传子 通过props传值,使用useState来控制state的状态值 父组件 Father.tsx里: 子组件 Child.tsx里: 展示效果: 子传父 跟react的方式一样,像子组件传入回调函数,通过接收子组件的返回值,再去更新父组件的state 父组件,Father.tsx里: 子组件,Child.tsx里: 展示效果: 子传父优化版,使用useCallback存放处理事件的函数 父组件,Father.tsx里: 子组件,Child.tsx

  • React父子组件间的传值的方法

    父组件向子组件传值: 父组件: import React, { Component } from 'react'; import Child from './chlid'; class parent extends Component{ constructor(props) { super(props); this.state = { txt0:"默认值0", txt1:"默认值1" } } componentDidMount(){ } parToson(){ th

  • js操作模态窗口及父子窗口间相互传值示例

    parent.hmtl 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset

  • Vue和React组件之间的传值方式详解

    在现代的三大框架中,其中两个Vue和React框架,组件间传值方式有哪些? 组件间的传值方式 组件的传值场景无外乎以下几种: 父子之间 兄弟之间 多层级之间(孙子祖父或者更多) 任意组件之间 父子之间 Vue Vue是基于单项数据流设计的框架,但是提供了一些的语法,指令去实现一些操作 父->子:通过props进行传递数据给子组件 子->父:通过emit向父组件传值 同时,还有一些其他进行父子组件通信的方式,通过$parent和$children获取组件的父或者子组件的实例,之后通过实例对象去修

  • 详解vue组件之间相互传值的方式

    概述 我们都知道 Vue 作为一个轻量级的前端框架,其核心就是组件化开发.Vue 就是由一个一个的组件构成的,组件化是它的精髓,也是最强大的功能之一.而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用. 但在实际项目开发过程中,我们需要访问其他组件的数据,这样就就有了组件通信的问题.在 vue 中组件之间的关系有:父子,兄弟,隔代.针对不同的关系,怎么实现数据传递,就是接下来要讲的. 一.父组件向子组件传值 即父组件通过属性的方式向子组件传值,子组件通过 props 来接收

  • vue3父子组件传值 双向绑定及注意问题小结

    attribute agruments vue3父子组件传值 双向绑定 及注意事项 https://www.jb51.net/article/269785.htm 可以参考下 首先注意 父子组件传值是单项数据流,vue3中子组件是不能直接修改父组件数据的,vue2中是可以直接使用sync的语法,直接进行修改的而sync修饰符的作用则是简化事件声明及监听的写法. 注意事项: // 父组件 // v-model 没有指定参数名时,子组件默认参数名是modelValue <ChildComp v-mo

  • vue组件间通信六种方式(总结篇)

    前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A 和 B.B 和 C.B 和 D 都是父子关系,C 和 D 是兄弟关系,A 和 C 是隔代关系(可能隔多代). 针对不同的使用场景,如何选择行之有效的通信方式?这是我们所要探讨的主题.本文总结了vue组件间通信的几种方式,如props. $emit / $on .vuex. $parent / $children . $attrs

随机推荐