vue组件之间进行传值的方法

目录
  • 前言
  • 1.父组件向子组件进行传值
  • 2.子组件向父组件进行传值
  • 3.非父子组件之间的传值
  • 总结

前言

目前在做vue的项目,用到了子组件依赖其父组件的数据,进行子组件的相关请求和页面数据展示,父组件渲染需要子组件通知更新父组件的state,父子组件之间的传值一般有三种方法:

父传子子传父非父子传值

注意:

父子组件的关系可以总结为 prop 向下传递,事件向上传递。父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息。

 接下来,我们会通过实例代码来看的更清晰,理解更容易:

1.父组件向子组件进行传值

 父组件代码:

<template>
  <div>
    父组件:
    <el-input v-model="val" style="width:300px" />
    <child :value="val" />
  </div>
</template>

  <script>
  import child from './child.vue'

  export default {
    name: 'Parent',
    data() {
      return {
        val: '我是父组件'
      }
    },
    components: {
      child
    },

  }
  </script>

子组件代码:

<template>

    <div class="child">
        子组件: {{  value  }}
    </div>

</template>

  <script>

export default {
    name: 'App',
    data() {
        return {
        }
    },
    props: ['value']

}
</script>
  <style scoped>
  .child {
      margin-top: 20px;
  }
  </style>

2.子组件向父组件进行传值

父组件代码:

<template>
  <div>
    父组件:
    <el-input v-model="val" style="width:300px" />
    <child :value="val" @bindMsg='msgFun' />
  </div>
</template>

  <script>
  import child from './child.vue'

  export default {
    name: 'Parent',
    data() {
      return {
        val: '我是父组件'
      }
    },
    components: {
      child
    },
    methods: {
      msgFun(childVal) {
        console.log(childVal,'childVal')
        this.val = childVal
      }
    }

  }
  </script>

子组件代码:

<template>

    <div class="child">
        子组件: {{  value  }}
        <el-button @click="$emit('bindMsg', '我是子组件')">点击改变父组建数据</el-button>
    </div>

</template>

  <script>

export default {
    name: 'App',
    data() {
        return {
        }
    },
    props: ['value'],

}
</script>
  <style scoped>
  .child {
      margin-top: 20px;
  }
  </style>

3.非父子组件之间的传值

.sync可以帮我们实现父组件向子组件传递的数据的双向绑定,所以子组件接收到数据后可以直接修改,并且会同时修改父组件的数据

ref绑定在子组件上,引用的指向就是子组件的实例,父组件可以通过 ref 主动获取子组件的属性或者调用子组件的方法

父组件代码:

<template>
  <div>
    父组件:
    <el-input v-model="val" style="width:300px" />
    <el-button @click="childRefClick">父组件ref点击</el-button>
    <child :value="val" @bindMsg='msgFun' :data.sync='data' ref='child' />

  </div>
</template>

  <script>
  import child from './child.vue'

  export default {
    name: 'Parent',
    data() {
      return {
        val: '我是父组件',
        data: ''
      }
    },
    components: {
      child
    },
    methods: {
      msgFun(childVal) {
        console.log(childVal, 'childVal')
        this.val = childVal;

      },
      childRefClick() {
        //ref获取子组件实例的属性和方法
        const child = this.$refs.child
        console.log(child.name)

        child.childBtnClick("调用了子组件的方法")
      }
    }

  }
  </script>

子组件代码:

<template>

    <div class="child">
        子组件: {{  value  }}
        <el-button @click="childBtnClick">点击改变父组建数据</el-button>
    </div>

</template>

  <script>

export default {
    name: 'App',
    data() {
        return {
            currenData: {}
        }
    },
    props: ['value', 'data'],

    methods: {
        childBtnClick(val) {
            console.log(val,'val')
            this.$emit('bindMsg', val || '我是子组件')
        },

    },

}
</script>
  <style scoped>
  .child {
      margin-top: 20px;
  }
  </style>

非父子组件之间的传值方式还有slot插槽,vuex数据状态管理器等等

总结

主要用到了父子组件的传值,props,$emit,ref,sync等方法,父子组件之间的传值,十分常见,只要我们用会了组件之间的传数据的方法,对于前端的组件抽离,性能提升都有很大的好处。

到此这篇关于vue组件之间进行传值的方法的文章就介绍到这了,更多相关vue组件传值内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue3兄弟组件传值之mitt的超详细讲解

    目录 前言 比起 Vue 实例上的 EventBus,mitt.js 好在哪里呢? 项目中安装mitt 使用方式一:在原型中声明 使用方式二:在组件中引用 总结 前言 Vue2.x 使用 EventBus 事件总线进行兄弟组件通信,而在Vue3中事件总线模式已经被移除,官方建议使用外部的.实现了事件触发器接口的库,例如 mitt 或 tiny-emitter. 比起 Vue 实例上的 EventBus,mitt.js 好在哪里呢? 首先它足够小,仅有200bytes. 其次支持全部事件的监听和批

  • Vue项目中props传值时子组件检测不到的问题及解决

    目录 props传值时子组件检测不到 props用法和传值问题 基本用法 props的使用 单向数据流:props是单向绑定的 总结一下props传值的注意点 props传值时子组件检测不到 我们在Vue项目开发的过程中,经常会需要在父子组件传值,我们都知道,父子组件传值的时候是通过 props 来进行的,但是在父组件的数据动态改变的时候,子组件却接收不到最新变化的数据,这个时候怎么办呢? 首先,传值不能用驼峰命名法,因为vue语法中规定HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大

  • Vue如何解决兄弟组件之间传值问题

    目录 解决兄弟组件之间传值问题 bus可以通过两种方式来实现 各类组件间传值方法(父子.兄弟.页级) 父子关系组件 兄弟关系组件 页级关系组件 解决兄弟组件之间传值问题 vue中 父组件向子组件传递参数时,可以通过prop来传递参数,prop可以是数组形式,也可以是对象格式,子向父组件传递参数时,通过$emit来传递,$emit('方法名', 传参),来实现子组件和父组件数据交互,但是在父组件中,有好多个子组件,这些子组件怎么样来进行数据通讯呢? 有的同学会立马想到 vuex ,答案是:可以的,

  • vue中兄弟组件传值的两种方式小结

    目录 一. bus总线传值的使用 二. 使用常规的传值:(子传父,父再传子) 总结 本demo主要是为了演示vue项目中兄弟组件之间的传值,这里我演示了两种方式: a. bus总线传值: b. 我自己一般把它当成常规的传值(其实也就是子组件A传父组件,父组件再传子组 件B) 下边开始本次demo的编写: 一. bus总线传值的使用 在项目中创建一个单独的eventBus.js文件 该js文件的内容很简单,就是暴露一个vue实例而已. 有人喜欢在main.js全局引入该js文件,我一般在需要使用到

  • 分享Vue组件传值的几种常用方式(一)

    目录 前言 第一种:父向子传值 新建文件导入结构 引入 注册 使用子组件 子组件内部代码完善 父组件内部代码完善 操作main.js文件 思路总结 前言 大家好,这个系列我们来讲解一下vue组件传值的几种常见方法和逻辑链路.最常见的vue组件传值分为三种,第一种是父向子传值,第二种是子向父传值,第三种是兄弟组件之间的传值,下面我们先就第一种情况来进行分析和编写. 第一种:父向子传值 父向子传值意思就是要把父组件里的值传递给子组件,方法是在子组件内部自定义一个props属性,通过props属性来完

  • 深入了解Vue3组件传值方式

    目录 父子组件传值 props 祖孙组件传值 provide 和 inject 父组件中点击按钮向子组件传值 今天说一下 vue3 的组件间传值,学习过 vue2 的宝子们肯定知道,组件传值是 vue 项目开发过程中必不可少的功能场景,在 vue2 里面有很多传值的方式,vue3 的传值方式呢,在这里稍微整理总结一下,但是不是很全,后期可能慢慢补充. 父子组件传值 props 和 vue2 一样,vue3 也可以使用 props 进行父组件传值给子组件,这个就不多说了直接上代码. 父组件 <te

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

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

  • vue3父组件和子组件如何传值实例详解

    目录 1.父组件打开子组件的的dialog组件 2.父组件关闭子组件的的dialog组件 3.开始运用: 用户的增加修改操作 1.父组件的修改 2.子组件的修改 3.父组件给子组件赋值 4.子组件调用父组件方法 总结 1.父组件打开子组件的的dialog组件 新建一个vue文件命名为test 然后咱们直接从官网CV一个带有表单的dialog组件如下 //子组件 <template> <el-dialog v-model="dialogFormVisible" titl

  • vue组件之间进行传值的方法

    目录 前言 1.父组件向子组件进行传值 2.子组件向父组件进行传值 3.非父子组件之间的传值 总结 前言 目前在做vue的项目,用到了子组件依赖其父组件的数据,进行子组件的相关请求和页面数据展示,父组件渲染需要子组件通知更新父组件的state,父子组件之间的传值一般有三种方法: 父传子子传父非父子传值 注意: 父子组件的关系可以总结为 prop 向下传递,事件向上传递.父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息.  接下来,我们会通过实例代码来看的更清晰,理解更容易:

  • vue组件之间数据传递的方法实例分析

    本文实例分析了vue组件之间数据传递的方法.分享给大家供大家参考,具体如下: 1.props:父组件 -->传值到子组件 app.vue是父组件 ,其它组件是子组件,把父组件值传递给子组件需要使用 =>props 在父组件(App.vue)定义一个属性(变量)sexVal = '男'  把该值传递给 子组件(B.vue),如下: App.vue <template> <div id="app"> <!--<router-view>&

  • Vue组件创建和传值的方法

    ## 创建组件的3种方法 # 第一种:  + Vue.extend()函数返回一个组件的构造器,里面包含一个参数,参数是对象,对象里面是一些配置项 + Vue.component()函数利用Vue.extend()返回的构造器创建一个组件的实例,有两个参数.; 参数1:组件名字,参数2:组件构造器 注意:       模板template中只能有一个根节点 组建的名字采用驼峰命名的话,使用时,就要加上"-"; 例如:组件名字indexA-->index-a; ## 第二种:  +

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

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

  • 通过实例讲解vue组件之间的传值

    目录 前言 1.父组件向子组件进行传值 2.子组件向父组件进行传值 3.非父子组件之间的传值 总结 前言 目前在做vue的项目,用到了子组件依赖其父组件的数据,进行子组件的相关请求和页面数据展示,父组件渲染需要子组件通知更新父组件的state,父子组件之间的传值一般有三种方法: 父传子 子传父 非父子传值 注意: 父子组件的关系可以总结为 prop 向下传递,事件向上传递.父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息. 接下来,我们会通过实例代码来看的更清晰,理解更容易

  • Vue组件之间的参数传递与方法调用的实例详解

    目录 父组件向子组件 子组件调用父组件方法 其它组件间调用 补充: 父组件向子组件 1.父组件向子组件传参:父组件中的子组件标签中增加 :param="param" 子组件中增加 props 接受参数(注意props需要与data同级) props: { param: { type: Object } }, data() { return { ... } }, 2.父组件调用子组件方法:父组件中子组件的标签增加 ref="abc" 例如: <child ref

  • vue组件之间的数据传递方法详解

    (1)props属性: 在父组件中,可以通过子组件标签属性的形式将数据或者函数传给子组件,子组件通过props去读取父组件传过来的数据 用法 父组件传数据给子组件: 一般的属性值都是用来给子组件展示的 子组件传数据给父组件 属性值为函数类型的,一般是用来子组件向父组件传递数据,子组件通过调用父组件传过来的函数,可以修改父组件的状态数据 缺点: 隔层组件间传递: 必须逐层传递(麻烦) 兄弟组件间: 必须借助父组件(麻烦) 注意: //子组件获取父组件传过来的值 props: { obj: {//o

  • Vue.js中兄弟组件之间互相传值实例

    兄弟组件之间互相传值,需要建立一个"中转站"(新的vue实例),并且需要主动触发. 实例上的$on方法来接受监听. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件传值</title> <script src="vue.js"></script

  • 深入理解Vue 组件之间传值

    一.父组件向子组件传递数据 在 Vue 中,可以使用props向子组件传递数据. 子组件部分: 这是 header.vue 的 HTML 部分,logo 是在 data 中定义的变量. 如果需要从父组件获取 logo 的值,就需要使用props: ['logo'] 在 props 中添加了元素之后,就不需要在 data 中再添加变量了 父组件部分: 在调用组件的时候,使用 v-bind 将 logo 的值绑定为 App.vue 中定义的变量 logoMsg 然后就能将App.vue中 logoM

  • Vue父组件和子组件之间数据传递和方法调用

    vue组件在通信中,无论是子组件向父组件传值还是父组件向子组件传值,他们都有一个共同点就是有中间介质,子向父的介质是自定义事件,父向子的介质是props中的属性. 父组件向子组件传值(子组件主动获取父组件的数据和方法) 父组件import引用子组件 使用子组件时在子组件上添加一个v-bind属性,并绑定上数据 在子组件中创建 props ,在props 中创建相同的属性名,用来接收数据 把接收到的数据在子组件中使用 子组件向父组件传值(父组件主动获取子组件的数据和方法) 子组件中需要发出该自定义

随机推荐