vue系列——组件数据通讯(一)

看博之前复习一遍关于组件数据通讯的官方文档:https://vuefe.cn/v2/guide/components.html

vue的官方文档本身写的算是比较清楚的,此博作为要点总结和深入补充

关键词:父组件通过props传递数据给子组件,子组件通过event传递数据给父组件

(一)props

1. 基本用法

prop 是父组件用来传递数据的一个自定义属性

//父组件<template>
  <div id="app">
    <myHeader :msg="msg" my="nnn"></myHeader>
  </div>
</template>

<script>

export default {
  name: ‘app‘,
  data () {
    return {
      msg: ‘from parent‘
    }
  },
  components: { myHeader }
}

  注意::msg="msg" my="my" 前者是动态绑定的父组件的数据,即data中的msg值‘from parent‘,后者的值是一个字符串直接量‘nnn‘

//子组件使用父组件传过来的值<template>
  <div id="header">
  {{msg+my}}
  </div>
</template>

<script>
export default {
  name: ‘myHeader‘,
  props: [‘msg‘,‘my‘],
  created(){console.log(this.msg)},
  data () {
    return {}
  }
}

  子组件使用父组件传递过来的值:

1.先要定义好接受的 props,这里接受了两个prop: [‘msg‘,‘my‘]

2.像在子组件data中定义的数据一样使用,即可以在template中通过{{...}}使用,也可以在子组件的选项对象函数中通过this.的方式使用

在vue dev-tools中可以观察到

2. 补充

2.1  prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。

以上这段文字是照搬官方文档,也就是说,props的功能只是:父组件传递数据给子组件,而不要试图去直接修改prop值,比如:

export default {
  name: ‘myNav‘,
  props: [‘msg‘],
  created(){
    this.msg = ‘new‘
  }
}

结果就像官方文档所说一样,修改不成功并且报了个警告,英文不太好,不过应该能猜到它的意思:老子官网上说的清清楚楚不能改不能改你还特么乱搞

如果在子组件中需要对父组件传过来的值做处理,比如父组件传过来一个时间戳,需要格式化怎么办呢?官网截图大法:

2.2 在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态

  这句话的结果就是,其实prop的值还是可以改的(我怎么有打脸的感觉),前提是prop值必须是对象

export default {
  name: ‘app‘,
  data () {
    return {
      msg: {a:‘b‘}
    }
  }
}

  如果将该msg作为prop传递给子组件,子组件则可以通过 this.msg.a = ‘我就是要改!‘,是能够成功修改父组件的msg值的,这样可以达到双向数据传递的目的。

但是有两点注意:

1. 只能改对象的属性,而不能重新给prop赋值,也就是说还是不能直接this.msg = ...,所以其实并没有打脸吧

2. 这样子虽然能实现双向传递,但是是否要这样用还要慎重小心

(二)event(自定义事件)

1. 基本用法:父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件

//父组件
<template>
  <div id="app">
    <myHeader @myEvent=‘parentListener‘></myHeader>
</template>

<script>
export default {
  name: ‘app‘,
  methods:{
    parentListener(){
      console.log(1)
    }
  },
  components: { myHeader}
}

子组件直接通过 this.$emit(‘myEvent‘,param1,param2,....) 触发事件即可,传递的数据通过后面的参数传递

很明显,通过event传递数据,对数据的控制能力明显比通过prop对象的方式要强的多,而且也能判别数据传递的来源

2. 非父子组件通讯

官网给出了Bus方案解决该问题,但讲的很简单我这里给出完整的使用例子

//首先实现一个bus模块,就是提供一个共用的mv实例
import Vue from ‘vue‘

var bus = new Vue()

export default bus

  

import bus from ‘../lib/bus‘
...
//组件A注册时间,这里直接写在生命周期钩子函数中
created(){
    bus.$on(‘aEvent‘, function (id) {
      alert(id)
    })
  }
...

 

import bus from ‘../lib/bus‘
...
//组件B触发事件
created(){
    bus.$emit(‘aEvent‘, 99)
  }
...

  

  

时间: 2024-10-14 12:14:09

vue系列——组件数据通讯(一)的相关文章

vue系列——组件数据通讯(二)

VUEX: https://vuex.vuejs.org,官方文档先仔细看一遍,否则基础的东西不知道看下面的内容会吃力 关于vuex的使用场景,先抄官网一段话: 虽然 Vuex 可以帮助我们管理共享状态,但也附带了更多的概念和框架.这需要对短期和长期效益进行权衡. 如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的.确实是如此——如果您的应用够简单,您最好不要使用 Vuex.一个简单的 global event bus 就足够您所需了.但是,如果您需要构建是一个中大型单页应用,您很可

vue.js 组件数据传递

一 父---> 子 组件通信1,声明一个组件(props 指定组件外来接受的参数,我指定了一个string类型的message参数,默认内容为'I Am AESCR') Vue.component('test-com',{ props:{ message:{ type:String, default:'I Am AESCR' } }, template:'<div>{{message}}</div>' }) <div id="app"> <

vue - 父组件数据变化控制子组件类名切换

先说当时的思路和实现核心是父子组件传值和v-bind指令动态绑定class实现 1. 父组件引用.注册.调用子组件script中引用 import child from '../components/Child' export中注册 export default { name: 'Home', components: { child }, } template中调用(pug写法) child() 2. 父组件准备数据并处理 data() { return { classNames: ''; }

vue子组件数据变化同步到父组件中

方法:通过watch监听子组件数据变化 1.父组件中注册方法 <Child @getChildValue="getChildValue"></Child> 2.子组件中通过watch监听数据变化,数据变化时通过$emit来触发方法传参 <template> <div class="child"> <p>子组件同步数据到父组件</p> <input type="text"

vue.js组件之间通讯--父组件调用子组件的一些方法,子组件暴露一些方法,让父组件调用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"></div></body><script src="node_modules/vue/

vue.js 组件之间如何实现数据传递?

组件是 vue.js  最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一.本文和大家分享的就是vue.js  组件之间传递数据相关内容,一起来看看吧,希望对大家 学习vue.js有所帮助. 组件 组件与组件之间,还存在着不同的关系.父子关系与兄弟关系(不是父子的都暂称为兄弟吧). 父子组件 父子关系即是组件 A  在它的模板中使用了组件  B ,那么组件  A  就是父组件,组件  B  就是子组件. //  注册

Vue学习笔记入门篇——组件的通讯

本文为转载,原文:Vue学习笔记入门篇--组件的通讯 组件意味着协同工作,通常父子组件会是这样的关系:组件 A 在它的模版中使用了组件 B.它们之间必然需要相互通信:父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件.然而,在一个良好定义的接口中尽可能将父子组件解耦是很重要的.这保证了每个组件可以在相对隔离的环境中书写和理解,也大幅提高了组件的可维护性和可重用性.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props 向下传递

vue系列——数据请求

数据请求有两个问题,一个是工具选择,一个是代码组织问题 (一)工具选择 我看过一些别人写的项目,有直接用jquery提供的ajax接口,有自己封装了一个fetch接口,当然更多的是选择vue的第三方数据请求模块,说的最多的是vue-resource和axios:axios是目前最推荐的,但是我最终还是暂时选择了vue-resource,原因很简单,在国内还是有很多jsonp需求的,而后者不支持,原因很简单作者不喜欢jsonp,它认为这是一种跨域的hack方式,是不好的所以也没准备支持. 为了防止

vue教程3-05 vue组件数据传递、父子组件数据获取

vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="bower_components/vue/dist/vue.js"><