vue组件之间的数据传递--随记

1.父组件与子组件之间的数据传递

首先:父组件里面引入了子组件,举个例子,父组件是A,子组件是B,A需要 import B from ‘子组件B的文件路径‘,

并且在注入父组件的components对象里

图1

其次调用子组件B,并将需要传递的值附在调用的子组件B上

请先忽略:letter

然后子组件B接受这个值:props:{}

2请先忽略 letter

2.子组件与父组件之间的 数据传递

子组件需要发送一个事件让父组建能够接收到---$emit

$emit将被点击元素的文本传递过去

父组件接收change这个事件

@change 父组件接收change这个事件

这边点击子组件那个元素它的文本这边就可以打印出来了~

这边点击子组件那个元素它的文本这边就可以打印出来了~

3.通过父组件实现子组件与子组件之间的数据传递

需要把子组件B里被点击元素的文本传递给子组件A

这时候父组件已经接收到子组件B传过来的文本变量letter了,组件A需要绑定这个letter,并且子组件A页面里呢需要接收这个letter ,props{},如图“”2请先忽略 letter“”所示,并且需要watch(监听器)这个变量letter,如下图做所示:


这样就可以在子组件A里获取子组件B的letter的值了

状态管理模式--vuex

这是一张截图--vuex腾空出世
我需要吃透这张图

1.先要全局引入注册store,本地是在main.js引入注册的

import store from './store/travel'

new Vue({

  el: '#app',

·······

  store,

  components: { App },

  template: '<App/>'

})

2.然后创建一个store

travel.js文件

3.调用

$store.commit 调用
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 专业考题类型管理运行工作负责人一般作业考题内容选项A选项B选项C选项D选项E选项F正确答案 变电单选GYSZ本规程...
    小白兔去钓鱼阅读 9,076评论 0 13
  • 组件(Component)是Vue.js最核心的功能,也是整个架构设计最精彩的地方,当然也是最难掌握的。...
    六个周阅读 5,657评论 0 32
  • 作为一个合格的开发者,不要只满足于编写了可以运行的代码。而要了解代码背后的工作原理;不要只满足于自己的程序...
    六个周阅读 8,545评论 1 33
  • 此文基于官方文档,里面部分例子有改动,加上了一些自己的理解 什么是组件? 组件(Component)是 Vue.j...
    陆志均阅读 3,876评论 5 14
  • 兰舟西去星光浅,梅花三弄天涯远。素手又轻弹,愁盈琴七弦。 湖边双宿燕,屋内声声慢。试问水中莲,相逢可历年?
    刘广申阅读 486评论 0 8