前言

组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。如何传递数据也成了组件的重要知识点之一。

组件

组件与组件之间，还存在着不同的关系。父子关系与兄弟关系（不是父子的都暂称为兄弟吧）。

父子组件

父子关系即是组件 A 在它的模板中使用了组件 B，那么组件 A 就是父组件，组件 B 就是子组件。

// 注册一个子组件
Vue.component('child', {
  data: function(){
    text: '我是father的子组件！'
  }
  template: '<span>{{ text }}</span>'
})
// 注册一个父组件
Vue.component('father', {
  template: '<div><child></child></div>' // 在模板中使用了child组件
})

直接使用 father 组件的时候：

<div id="app">
  <father></father>
</div>

页面中就会渲染出 ：我是father的子组件！

father 组件在模板中使用了 child 组件，所以它就是父组件，child 组件被使用，所以 child 组件就是子组件。

兄弟组件

两个组件互不引用，则为兄弟组件。

Vue.component('brother1', {
  template: '<div>我是大哥</div>'
})
Vue.component('brother2', {
  template: '<div>我是小弟</div>'
})

使用组件的时候：

<div id="app">
  <brother1></brother1>
  <brother2></brother2>
</div>

页面中就会渲染出 ：

我是大哥

我是小弟

Prop

子组件想要使用父组件的数据，我们需要通过子组件的 props 选项来获得父组件传过来的数据。以下我使用在 .vue 文件中的格式来写例子。

如何传递数据

在父组件 father.vue 中引用子组件 child.vue，把 name 的值传给 child 组件。

<template>
  <div class="app">
    // message 定义在子组件的 props 中
    <child :message="name"></child>
  </div>
</template>
<script>
  import child from './child.vue';
  export default {
    components: {
      child
    },
    data() {
      return {
        name: 'linxin'
      }
    }
  }
</script>

在子组件 child.vue 中的 props 选项中声明它期待获得的数据

<template>
  <span>Hello {{message}}</span>
</template>
<script>
  export default {
    // 在 props 中声明获取父组件的数据通过 message 传过来
    props: ['message']
  }
</script>

那么页面中就会渲染出：Hello linxin

单向数据流

当父组件的 name 发生改变，子组件也会自动地更新视图。但是在子组件中，我们不要去修改 prop。如果你必须要修改到这些数据，你可以使用以下方法：

方法一：把 prop 赋值给一个局部变量，然后需要修改的话就修改这个局部变量，而不影响 prop

export default {
  data(){
    newMessage: null 
  },
  props: ['message'],
  created(){
    this.newMessage = this.message;
  }
}

方法二：在计算属性中对 prop 进行处理

export default {
  props: ['message'],
  computed{
    newMessage(){
      return this.newMessage + ' 哈哈哈';
    }
  }
}

自定义事件

prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。修改子组件的 prop 值，是不会传回给父组件去更新视图的。那么子组件要如何去与父组件通讯呢？

那就是自定义事件。通过在父组件 $on(eventName) 监听自定义事件，当子组件里 $emit(eventName) 触发该自定义事件的时候，父组件执行相应的操作。

比如在父组件中控制一个弹框子组件的显示，在子组件中按下关闭之后，告诉父组件去隐藏它，然后父组件就执行操作隐藏弹框。

<template>
  <div class="app">
    // hide 为自定义事件，名字可以自己随便起，不能有大写字母，可以使用短横线
    // @hide 监听子组件触发 hide 事件，则会执行 hideDialog 方法
    <dialog :is-show="show" @hide="hideDialog"></dialog>
    <button @click="showDialog">显示弹框</button>
  </div>
</template>
<script>
  import dialog from './dialog.vue';
  export default {
    components: { dialog },
    data() {
      return {
        show: false
      }
    },
    methods: {
      showDialog() {
        this.show = true;
      },
      hideDialog() {
        this.show = false;
      }
    }
  }
</script>

在子组件 dialog.vue 中：

<template>
  <div class="dialog" v-show="isShow">
    <p>这里是弹框子组件</p>
    <button @click="toHide">关闭弹框</button>
  </div>
</template>
<script>
  export default {
    // 驼峰式命名的 prop 需要转换为相对应的短横线隔开式 is-show
    props: ['isShow'],
    methods: {
      toHide(){
        // $emit 方法触发父组件的监听事件
        this.$emit('hide');
      }
    }
  }
</script>

这样就实现了父子组件之间的相互通讯。

Vuex

上面的例子都是建立在父子关系的组件上，但是对于其他层级的关系，实现起来就比较繁琐了。那么这时候 Vuex 就能更好的帮你在各个组件间实时通讯了。关于 Vuex，可查看我的另一篇文章：Vuex 模块化实现待办事项的状态管理

总结

组件通讯并不是一定要使用必须要使用 Vuex，对于一些简单的数据传递，prop 也可以完成。本文主要是对组件传参的一些基础知识点的记录，实战可以参考 notepad 这个例子，使用 prop 实现子组件的显示与隐藏，使用 vuex 来实现组件间的数据状态管理。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# vue.js组件传递数据  # vue  # 组件传递数据  # vuejs  # 数据传递  # vue父组件向子组件(props)传递数据的方法  # vuejs动态组件给子组件传递数据的方法详解  # vue组件中使用props传递数据的实例详解  # vue中各组件之间传递数据的方法示例  # Vue2.x中的父组件传递数据至子组件的方法  # vue2.0 父组件给子组件传递数据的方法  # vue组件Prop传递数据的实现示例  # vue子组件使用自定义事件向父组件传递数据  # vue项目中做编辑功能传递数据时遇到问题的解决方法  # Vue.js组件使用props传递数据的方法  # 我是  # 自定义  # 就会  # 使用了  # 都是  # 如果你  # 成了  # 也会  # 你可以  # 就能  # 必须要  # 帮你  # 要去  # 而不  # 这就  # 能有  # 可以使用  # 按下  # 即是  # 来实现 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel中间件起什么作用_Laravel Middleware请求生命周期与自定义详解  ,交易猫的商品怎么发布到网站上去？  详解免费开源的.NET多类型文件解压缩组件SharpZipLib（.NET组件介绍之七）  Laravel Blade组件怎么用_Laravel可复用视图组件的创建与使用  Laravel distinct去重查询_Laravel Eloquent去重方法  javascript基于原型链的继承及call和apply函数用法分析  英语简历制作免费网站推荐,如何将简历翻译成英文？  齐河建站公司：营销型网站建设与SEO优化双核驱动策略  Android自定义listview布局实现上拉加载下拉刷新功能  百度浏览器网页无法复制文字怎么办 百度浏览器复制修复  jquery插件bootstrapValidator表单验证详解  Laravel用户认证怎么做_Laravel Breeze脚手架快速实现登录注册功能  高防服务器租用指南：配置选择与快速部署攻略  网站页面设计需要考虑到这些问题  JS实现鼠标移上去显示图片或微信二维码  如何在IIS服务器上快速部署高效网站？  Win11关机界面怎么改_Win11自定义关机画面设置【工具】  iOS验证手机号的正则表达式  如何在腾讯云服务器快速搭建个人网站？  如何获取上海专业网站定制建站电话？  大连 网站制作,大连天途有线官网？  mc皮肤壁纸制作器,苹果平板怎么设置自己想要的壁纸我的世界？  Laravel Sail是什么_基于Docker的Laravel本地开发环境Sail入门  详解Huffman编码算法之Java实现  详解Android图表 MPAndroidChart折线图  免费视频制作网站,更新又快又好的免费电影网站？  移动端脚本框架Hammer.js  香港服务器网站推广：SEO优化与外贸独立站搭建策略  JS中对数组元素进行增删改移的方法总结  Bootstrap CSS布局之列表  关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)  品牌网站制作公司有哪些,买正品品牌一般去哪个网站买？  Laravel怎么生成二维码图片_Laravel集成Simple-QrCode扩展包与参数设置【实战】  jQuery中的100个技巧汇总  Laravel如何升级到最新版本？（升级指南和步骤）  如何为不同团队 ID 动态生成多个“认领值班”按钮  移动端手机网站制作软件,掌上时代，移动端网站的谷歌SEO该如何做？  Windows驱动无法加载错误解决方法_驱动签名验证失败处理步骤  非常酷的网站设计制作软件,酷培ai教育官方网站？  北京网站制作费用多少,建立一个公司网站的费用.有哪些部分,分别要多少钱？  JavaScript如何实现倒计时_时间函数如何精确控制  米侠浏览器网页背景异常怎么办 米侠显示修复  Laravel怎么连接多个数据库_Laravel多数据库连接配置  如何用VPS主机快速搭建个人网站？  实例解析Array和String方法  Windows10电脑怎么设置虚拟光驱_Win10右键装载ISO镜像文件  如何在阿里云ECS服务器部署织梦CMS网站？  Laravel的Blade指令怎么自定义_创建你自己的Laravel Blade Directives  php结合redis实现高并发下的抢购、秒杀功能的实例  北京专业网站制作设计师招聘,北京白云观官方网站？