脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue组件传值

vue组件传值的实现方式小结【三种方式】

 更新时间：2020年02月05日 09:07:45   作者：不想写代码的码农  
这篇文章主要介绍了vue组件传值的实现方式,结合实例形式总结分析了vue.js组建传值的三种实现方式,包括父传子、子传父及非父子传值,需要的朋友可以参考下

本文实例讲述了vue组件传值的实现方式。分享给大家供大家参考，具体如下：

前言

vue的组件传值分为三种方式：父传子、子传父、非父子组件传值

引用官网的一句话：父子组件的关系可以总结为 prop 向下传递，事件向上传递

父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示：

下面我们就开始用代码（一言不合就上代码）详细的介绍vue组件传值的三种方式

1、父传子

子组件的代码：

<template>
  <div id="container">
    {{msg}}
  </div>
</template>
<script>
export default {
 data() {
  return {};
 },
 props:{
  msg: String
 }
};
</script>
<style scoped>
#container{
  color: red;
  margin-top: 50px;
}
</style>

父组件的代码：

<template>
  <div id="container">
    <input type="text" v-model="text" @change="dataChange">
    <Child :msg="text"></Child>
  </div>
</template>
<script>
import Child from "@/components/Child";
export default {
 data() {
  return {
   text: "父组件的值"
  };
 },
 methods: {
  dataChange(data){
    this.msg = data
  }
 },
 components: {
  Child
 }
};
</script>
<style scoped>
</style>

父传子的实现方式就是通过props属性，子组件通过props属性接收从父组件传过来的值，而父组件传值的时候使用 v-bind 将子组件中预留的变量名绑定为data里面的数据即可

2、子传父

子组件代码：

<template>
  <div id="container">
    <input type="text" v-model="msg">
    <button @click="setData">传递到父组件</button>
  </div>
</template>
<script>
export default {
 data() {
  return {
   msg: "传递给父组件的值"
  };
 },
 methods: {
  setData() {
   this.$emit("getData", this.msg);
  }
 }
};
</script>
<style scoped>
#container {
 color: red;
 margin-top: 50px;
}
</style>

父组件代码：

<template>
  <div id="container">
    <Child @getData="getData"></Child>
    <p>{{msg}}</p>
  </div>
</template>
<script>
import Child from "@/components/Child";
export default {
 data() {
  return {
   msg: "父组件默认值"
  };
 },
 methods: {
  getData(data) {
   this.msg = data;
  }
 },
 components: {
  Child
 }
};
</script>
<style scoped>
</style>

子传父的实现方式就是用了 this.$emit 来遍历 getData 事件，首先用按钮来触发 setData 事件，在 setData 中 用 this.$emit 来遍历 getData 事件，最后返回 this.msg

总结：

  • 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
  • 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
  • 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

3、非父子

vue 中没有直接子对子传参的方法，建议将需要传递数据的子组件，都合并为一个组件

如果一定需要子对子传参，可以先从传到父组件，再传到子组件（相当于一个公共bus文件）

为了便于开发，vue 推出了一个状态管理工具 vuex，可以很方便实现组件之间的参数传递

希望本文所述对大家vue.js程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • AntV+Vue实现导出图片功能

    AntV+Vue实现导出图片功能

    AntV 组织图操作完毕以后，需要点击按钮将画布以图片的形式导出，这篇文章主要介绍了AntV结合Vue实现导出图片功能,需要的朋友可以参考下
    2023-01-01
  • 实现一个简单的vue无限加载指令方法

    实现一个简单的vue无限加载指令方法

    vue 中的自定义指令是对底层 dom 进行操作，下面以实现滚动到底部加载数据，实现无限加载来介绍如何自定义一个简单的指令。
    2017-01-01
  • vue实现跳转接口push 转场动画示例

    vue实现跳转接口push 转场动画示例

    今天小编就为大家分享一篇vue实现跳转接口push 转场动画示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue学习笔记之表单输入控件绑定

    Vue学习笔记之表单输入控件绑定

    本篇文章主要介绍了Vue学习笔记之表单输入绑定，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vue3中的setup()函数基本使用详解

    vue3中的setup()函数基本使用详解

    在 Vue3 中,setup 函数是一个新引入的概念,它代替了之前版本中的 data、computed、methods 等选项,用于设置组件的初始状态和逻辑,本文将主要介绍Setup的基本用法和少量原理,感兴趣的朋友一起看看吧
    2024-02-02
  • vue 项目地址去掉 #的方法

    vue 项目地址去掉 #的方法

    vue 项目往往会搭配 vue-router 官方路由管理器，它和 vue.js 的核心深度集成，让构建单页面应用变得易如反掌。这篇文章主要介绍了vue 项目地址去掉 #的方法,需要的朋友可以参考下
    2018-10-10
  • Vue实现右键菜单组件的超详细教程(支持快捷键)

    Vue实现右键菜单组件的超详细教程(支持快捷键)

    右键菜单组件非常常见,所有的前端开发工程师都会遇到类似的功能组件开发需求,这篇文章主要给大家介绍了关于Vue实现右键菜单组件的超详细教程,文中介绍的方法支持快捷键,需要的朋友可以参考下
    2024-02-02
  • antd多选下拉框一行展示的实现方式

    antd多选下拉框一行展示的实现方式

    这篇文章主要介绍了antd多选下拉框一行展示的实现方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • Vue中实现父子组件双向数据流的三种方案分享

    Vue中实现父子组件双向数据流的三种方案分享

    通常情况下,父子组件的通信都是单向的,或父组件使用props向子组件传递数据,或子组件使用emit函数向父组件传递数据,本文将尝试讲解Vue中常用的几种双向数据流的使用,需要的朋友可以参考下
    2023-08-08
  • vue中项目如何提交form格式数据的表单

    vue中项目如何提交form格式数据的表单

    这篇文章主要介绍了vue中项目如何提交form格式数据的表单，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-06-06

最新评论