VUE父子组件传值

IT那活儿发布于2023-01-11 13:19 / 1615人阅读

VUE父子组件传值

点击上方“IT那活儿”公众号，关注后了解更多内容，不管IT什么活儿，干就完了！！！

一

父传子

父组件：

<template>
  <div>
    父组件:
    <input type="text" v-model="name">
    
    <child :inputName="name">child>
  div>
template>
<script>
  import child from ./child
  export default {
    components: {
      child
    },
    data () {
      return {
        name: 
      }
}
}
script>

子组件：

<template>
  <div>
    子组件:
    <span>{{ inputName }}span>
  div>
template>
<script>
export default {
  props: ["inputName"],//接受父组件值
  data() {},
};
script>

二

子传父

子组件：

<template>
  <div>
    子组件:
    <span>{{ childValue }}span>
    <input type="button" value="点击" @click="childClick" />
  div>
template>
<script>
export default {
  data() {
    return {
      data: "子组件数据",
    }; },
  methods: {
    childClick() {
      // this.data是需要传的值
      this.$emit("method", this.data);
    }, },};
script>

父组件：

<template>
  <div>
    父组件:
    <span>{{ name }}span>
    
    <child @method="getInfo"> child>
  div>
template>
<script>
import child from "./child";
export default {
  components: {
    child,
  },
  data() {
    return {
      name: "",
    }; },
  methods: {
    getInfo(data) {
      // childValue就是子组件传过来的值
      this.name = data;
    }, },};
script>

三

兄弟传值

通过父组件在中间做中间件，相互传值（子组件1传值给父组件，父组件传值给子组件2）

父组件：

<template>
  <div>
    
    <childA @name="getName">childA>
    
    <childB :value="value">childB>
  div>
template>
<script>
import childA from "./childA";
import childB from "./childB";
export default {
  components: {
    childA,
    childB,
  },
  data() {
    return {
      value: "",
    }; },
  methods: {
    getName(val) {
      this.value = val;
    }, },};
script>

子组件A：

<template>
  <div>
    子组件A:
    <el-input v-model="value">el-input>
    <el-button @click="submit">提交el-button>
  div>
template>
<script>
export default {
  data() {
    return {
      value: "",
    }; },
  methods: {
    submit() {
      //向父组件传值
      this.$emit("name", this.value);
    }, },};
script>
<style lang="scss">
.el-input {
  width: 200px;
}
style>

子组件2：

<template>
  <div>子组件B:{{ value }}div>
template>
<script>
export default {
  props: ["value"],
};
script>

本文作者：池思敏(上海新炬王翦团队）

本文来源：“IT那活儿”公众号

GPU云服务器云服务器 vue父子组件通讯父子组件父子组件通信父子组件通讯

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/129206.html

简单说说vue的父子组件，父子组件传值和vuex

摘要：我们需要在里改动一下代码首先就是绑定一个自定义事件再增加然后在中变成就是触发父组件中的方法所以，触发了父组件的函数，改变了父组件的的值，父组件再通过传值给子组件。从而实现数据传递，父子组件通信。一、vue的父子组件之间是如何传值的？首先呢，需要说说的是，vue既然有双向绑定，那为何会有父子组件之间的传值问题？这个问题也简单，vue的组件会供其他的vue页面进行调用，如果数组都是双...

Tecode 2019-08-22 18:31 评论0 收藏0
Vue 父子传值与子父传值

摘要：子实例可以用访问父实例，子实例被推入父实例的数组中。节制地使用和它们的主要目的是作为访问组件的应急方法。更推荐用和实现父子组件通信我是父组件中的数据我是我是号组件我是利用props父子传值父组件，可以在引用子组件的时候，通过属性绑定（v-bind:）的形式, 把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用创建 Vue 实例，得到 Vie...

aisuhua 2019-08-23 17:14 评论0 收藏0
vue -- 非父子组件传值，事件总线（eventbus）的使用方式

摘要：我的个人博客地址资源地址非父子组件传值，事件总线的使用方式我的博客地址如果您对我的博客内容有疑惑或质疑的地方，请在下方评论区留言，或邮件给我，共同学习进步。欢迎访问我的个人博客：http://www.xiaolongwu.cn 前言先说一下什么是事件总线，其实就是订阅发布者模式；比如有一个bus对象，这个对象上有两个方法，一个是on（监听，也就是订阅），一个是emit（触发，也就...

zone 2019-08-23 14:37 评论0 收藏0
一个故事讲懂vue父子组件传值

摘要：老王用笔在纸上写了好多内容，把纸纸相当于，也就是数据放进了信封信封相当于属性，也就是里，然后给了邮局相当于相当于一个中介，快递员进行派送，小明来到邮箱相当于，看到里边有封信相当于父组件的值，拿了出来。讲故事前先讲代码父组件向子组件传值父组件数据传递给子组件可以通过props属性来实现父组件： import childComponent from ...

xi4oh4o 2019-08-23 18:19 评论0 收藏0
vue中的父子传值双向绑定及数据修改视图不更新问题

摘要：在进行父子组件传值时，用到子组件直接控制父组件中的变量值以及在中直接更改对象或者数组的值，视图未发生变化的解决办法，当时完成项目时，一直未找到原因，修改了好久。在进行父子组件传值时，用到子组件直接控制父组件中的变量值以及在vue中直接更改对象或者数组的值，视图未发生变化的解决办法，当时完成项目时，一直未找到原因，修改了好久。 1.父子组件传值双向绑定在传递给子组件中的变量上使用.s...

宋华 2019-08-23 18:05 评论0 收藏0
vue组件封装及父子组件传值,事件处理

摘要：开发中把有统一功能的部分提取出来作为一个独立的组件在需要使用的时候引入可以有效减少代码冗余难点在于如果封装使用如何传参派发事件等我会采取倒叙的方式进行说明本文总结于实战解密一书代码如下封装组件更多要向组件输入数据就不能用来作为数据容器 vue开发中,把有统一功能的部分提取出来,作为一个独立的组件,在需要使用的时候引入,可以有效减少代码冗余.难点在于如果封装,使用,如何传参,派发事件等,...

hikui 2019-08-23 14:39 评论0 收藏0