非父子组件传值

轻量级 视图层框架

复杂组件间传值,引进其他的工具或者设计模式

1.vuex

2.总线机制

//main line

1.在main.js中注册全局的bus 

Vue.prototype.bus=new Vue();

2.在组建中使用

   子组建使用:this.bus.$emit('自定义事件名',data)

methods:{
handleClicks(){
this.bus.$emit('openMenu',true)
}
} 父组建使用: this.bus.$on("自定义事件名", msg => {}) mounted() {
this.bus.$on("openMenu", msg => {
this.show = msg;
}); }

vue组件传值 part2的更多相关文章

  1. Vue—组件传值及vuex的使用

    一.父子组件之间的传值 1.父组件向子组件传值: 子组件在props中创建一个属性,用以接收父组件传来的值 父组件中注册子组件 在子组件标签中添加子组件props中创建的属性 把需要传给子组件的值赋给 ...

  2. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  3. Vue组件传值方法调用

    1.子组件改变父组件的值 <father  label="云盘快照" name="name2"> <son :props='rows'   @ ...

  4. vue ---- 组件传值之间使用 v-model

    父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa"  子组件使用$emit('update:msg', 'msg改变后的值xxx ...

  5. vue组件传值的三种方式,文字版解释

    父传子: 当子组件子父组件中当标签使用的时候,给子组件添加一个自定义属性,值为需要传递的值(如: <Child v-bind:parentToChild="parentMsg" ...

  6. Vue组件传值,父传子,子传父,非父子组件

    vue3中传值方式: 1.父组件向子组件传值 父组件Blog.vue <template> <div id="blog"> <Alert v-if=& ...

  7. Vue 组件 传值

    注意 Vue模板只能有一个对象,要想用多个对象时用div包裹 一.父组件->子组件 通过props 1.子组件: 声明:proprs =[‘xx’],xx是在父组件中引用子组件,子组件的属性(t ...

  8. Vue组件传值(二)之 非父子组件传值

    Vue中非父子组件之间是如何实现通信的? 本章主要讲的是非父子组件传值,父子组件传值请看上一篇文章. 1.创建新的Vue实例引入项目中,通过$emit.$on来实现非父子组件传值: 1 <!DO ...

  9. Vue组件传值(一)之 父子之间如何传值

    Vue中组件之间是如何实现通信的? 1.父传子: 父传子父组件通过属性进行传值,子组件通过 props 进行接受: 1 父组件中: 2 3 <template> 4 <div id= ...

随机推荐

  1. Django(二) 模板:基本使用、模板语法、模板继承

    一.模板的使用实战 接:https://blog.csdn.net/u010132177/article/details/103788677 参考:https://docs.djangoproject ...

  2. P 1008 说反话

    转跳点:

  3. mysql IF-IFNULL和IF-ISNULL同样逻辑的运行差别

    首先,目标记录是存在的 SELECT * FROM d_device_user_bind dub WHERE dub.`uid`='222222222221' 其次, SELECT dub.uid,d ...

  4. 小程序开发顶部TAB栏和侧边分类点击

    先上一个效果图: 根据这个效果图我来说内容. 首先是顶部tab栏 效果实现依靠的是一个组件scroll-view.这个组件很有意思,可以多层嵌套,当然它的属性也很多. 这里主要用的是scroll-x, ...

  5. 实验吧-杂项-啦啦啦(数据包http导出、图片拼接)

    比较综合的一道题. 1.数据包数据提取 首先下载数据包,一般数据包都是抓取的一些数据,需要对数据进行分析. 用wireshark打开数据包,筛选出http协议的数据,发现有两个是上传的数据: 我们就看 ...

  6. Node.js NPM 作用

    章节 Node.js NPM 介绍 Node.js NPM 作用 Node.js NPM 包(Package) Node.js NPM 管理包 Node.js NPM Package.json NPM ...

  7. 2016蓝桥杯决赛C/C++A组第三题 打靶

    题意: 小明参加X星球的打靶比赛.比赛使用电子感应计分系统.其中有一局,小明得了96分. 这局小明共打了6发子弹,没有脱靶.但望远镜看过去,只有3个弹孔.显然,有些子弹准确地穿过了前边的弹孔. 不同环 ...

  8. TX2--安装跑一python3.5

    sudo add-apt-repository ppa:webupd8team/javasudo apt-get updatesudo apt-get install oracle-java8-ins ...

  9. C++ STD Gems03

    transform.for_each #include <iostream> #include <vector> #include <string> #includ ...

  10. Thread.currentThread()和this的区别

    1. Thread.currentThread()可以获取当前线程的引用,一般都是在没有线程对象又需要获得线程信息时通过Thread.currentThread()获取当前代码段所在线程的引用. 2. ...