Vue实现父子组件传值其实不难

2024-04-06 19:37:21

父传子

通过 props。props 就是用来接收来自父组件的数据的。

下图是大致的示意图。

代码实现

1.在父组件中引用子组件时，使用属性传值。

① 如果是简单的静态值可以不适用 v-bind。<Child title="dataToChild" />

② 大多情况下时使用动态传值，使用 v-bind 即可。<Child :title="dataToChild" />

parent.vue

<template>
  <Child title="dataToChild" />
</template>
<script>
import Child from './child' //引入子组件
export default{
  components: { Child },
  data () {
    return {
      dataToChild: 'From Parent to Child'
    }
  }
}
</script>

2.子组件中使用 props 接收。

props 可以是对象或简单数组，并且可以对对象进行类型、默认值等高级配置

① 简单字符数组。就是简单列出要接收的数据的属性名，并不可以是对象数组。

props:[ 'data1', 'data2' ]

② 对象。

props:{
  data1:{
    type: String,
    default: 'no data'
  },
  data2:{
    type: Number,
    default: 0，
    required: true
  }
}

child.vue

<template>
  <div class="children">
    <div>来自父组件的值是：{{title}}</div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String, //接收值得类型
      default: '父组件没传值' //配置默认值
    }
  },
  //或者可以写成简单数组 props: ['title'],
  data () {
    return {}
  }
}
</script>

父组件传值到子组件就是 vue 单向数据流的一般表现：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。

子传父

通过 v-on 和 $emit

Vue中父子组件的关系可以总结为 prop 向下传递，事件向上传递。

父组件通过 prop 给子组件下发数据，子组件通过事件给父组件传递信息。

代码实现

1.在父组件中把定义事件绑定到子组件。

parent.vue

<template>
  <div class="parent">
    <Child @child="getChildData" />
    <p>子组件传给父组件的值：{{dataFromChild}}</p>
  </div>
</template>

<script>
import Child from './Child'
export default {
  components: { Child },
  data () {
    return {
      dataFromChild: ''
    }
  },
  methods: {
  	/* 自定义事件 */
    getChildData (param) {
      this.dataFromChild = param
    }
  }
}
</script>

2.在子组件中触发父组件中自定义的函数并传递参数

child.vue

<template>
  <div class="child-parent">
    <input type="text" v-model="toParent" />
    <button @click="dataToParent">传值到父组件</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      toParent: 'From Child to Parent'
    }
  },
  methods: {
    dataToParent () {
      this.$emit('child', this.toParent)
    }
  }
}
</script>

总结

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

vue单页开发父子组件传值思路详解

vue单页开发时经常需要父子组件之间传值,自己用过但是不是很熟练,这里我抽空整理了一下思路,写写自己的总结. GitHub地址:https://github.com/leileibrother/wechat-vue 文件目录如下图,example.vue是父组件,exampleChild.vue是子组件. 父组件引入子组件,父组件html的代码如下: <template> <div> <h3>这是父组件</h3> <p style="marg
Vue中父组件向子组件传递数据的几种方法

最近在学习vue的源码,总结了几种vue中父子组件传递数据的方法. 1.props & event 父组件向子组件传递props数据,子组件通过触发事件向父组件回传数据,代码如下: //子组件 <template> <div @click="changeName('YYY')">{{name}}</div> </template> <script> export default{ props:['name'],//or
vue父子组件动态传值的几种方式及注意问题详解

1.vue父组件向子组件动态传值的两种方法在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行遍历并展示图片,因为有时候获取到的会是空,所以这里要考虑到动态获取. 方法有两种, vue父组件向子组件动态传值方法一: props传值,这里注意一个问题,传过来的值需要用watch监听并赋值,否则这里获取到的是空数组父组件: <uploadImg :width="200" :
Vue实现父子组件传值其实不难

目录父传子代码实现子传父代码实现总结父传子通过 props.props 就是用来接收来自父组件的数据的. 下图是大致的示意图. 代码实现 1.在父组件中引用子组件时,使用属性传值. ① 如果是简单的静态值可以不适用 v-bind.<Child title="dataToChild" /> ② 大多情况下时使用动态传值,使用 v-bind 即可.<Child :title="dataToChild" /> parent.vue &
详解Vue之父子组件传值

一.简要介绍父子组件之间的传值主要有三种:传递数值.传递方法.传递对象,主要是靠子组件的 props 属性来接收传值,下面分别介绍: (一)传递数值 1.子组件:Header.vue <template> <div>  <h2>{{msg}}</h2> </div> </template> <script> expo
vue中父子组件传值,解决钩子函数mounted只运行一次的操作

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

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

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

一.父子组件传值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父子组件传值</title> <style> </style> <script src="./vue.js"></script> </head> <bod
快速了解Vue父子组件传值以及父调子方法、子调父方法

稍微总结了一下Vue中父子间传值以及相互调方法的问题,非常基础.希望可以帮到你!先来个最常用的,直接上代码: 1.父传值给子组件父组件: <template> <div> <p class="father">父组件</p> <child :sid="id"></child> </div> </template> <script> import child f
vue父子组件传值以及单向数据流问题详解

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

前言在做微信小程序时,觉得小组里对购物车的实现不是很完美,就自己尝试的写了下,然后用到了父子组件传值,父子组件传值的话,和vue框架上是非常相似的,以及calc这个css函数,calc有个注意点,自己不怎么用,一时间有差点忘了,这里记录下下面话不多说了,来一起看看详细的介绍吧 1.效果图 2.子组件实现要实现图中删除的效果,使用组件的形式更好做点,我当时本想直接在pages里实现,不过结果就是,滑动时,所有的商品都显示了删除按钮,除非用数组将每个商品要移动的距离存储起来,不过这样的话就很麻

Vue实现父子组件传值其实不难

目录

父传子

代码实现

子传父

代码实现

总结

相关推荐

随机推荐