Vue.js中兄弟组件之间互相传值实例
兄弟组件之间互相传值,需要建立一个“中转站”(新的vue实例),并且需要主动触发。
实例上的$on方法来接受监听。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件传值</title> <script src="vue.js"></script> </head> <body> <div id="box"> <child1></child1> <child2></child2> </div> <template id="c1"> <h1>~~~~~~我是哥哥~~~~{{msg}} <button @click='fn'>点击</button></h1> </template> <template id="c2"> <h3>~~~~~~我是弟弟~~~~{{msg2}}</h3> </template> </body> </html> <script> var Hub=new Vue(); // 1) 中转站,其中不需要设置任何参数 var vm=new Vue({ el: '#box', components:{ child1:{ template:'#c1', data:function(){ return { msg: 'hello' } }, methods:{ fn:function(){ // 2) 主动触发监听(中转站触发监听) console.log(this.msg); //hello Hub.$emit('change',this.msg) //$emit触发监听方法 } } }, child2:{ template:'#c2', data:function(){ return { msg2: 'world' } }, // 创建完成 new Vue create mount // 钩子函数 created(){ // 3) 接收监听 $on('事件名称',function(val){}) val是传递过来的值 Hub.$on('change',function(val){ console.log(val) //hello // this.msg2 = val; }) } } } }) </script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
详解Vue.js基于$.ajax获取数据并与组件的data绑定
Vue.js与jQuery不冲突??? 在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax请求来完成的. 说到ajax请求,第一反应肯定想到了jQuery,项目中如果引入jQuery会帮助我们简化很多操作,简化DOM操作,ajax方法获取后端数据等. 然而,Vue.js和jQuery冲突吗??? 答案显然是不冲突!!! 接下来会实现Vue.js组件中使用jQuery的ajax方法获取服务器端数据并绑定至组件的data中. 创建Vue.js单文件组件 <
-
探讨Vue.js的组件和模板
摘要: 指令是Vue.js中一个重要的特性, 主要提供了一种机制将数据的变化映射为DOM行为. 那什么交数据的变化映射为DOM行为, Vue.js是通过数据驱动的, 所以我们不会直接去修改DOM结构, 不会出现类似$('ul').append('<li>one</li>')这样的操作, 当数据变化时,指令会一句设定好的操作对DOM进行修改, 这样就可以只关注数据的变化, 而不用去管理DOM的变化和状态, Vue的内置指令 1. v-bind v-bind主要用于绑定DOM元素属性(
-
Vue.js学习笔记之常用模板语法详解
本文介绍了Vue.js 常用模板语法,分享给大家,具体如下: 一.文本渲染 Vue支持动态渲染文本,即在修改属性的同时,实时渲染文本内容.同时为了提高渲染效率,也支持只渲染一次,即第一次渲染出文本后,文本内容不再跟随属性值的变化而变化. 实时渲染 <div class="row"> <h2>文本 - 实时渲染</h2> <input type="text" v-model="msg" class=&quo
-
Vue.js项目模板搭建图文教程
前言 从今年(2017年)年初起,我们团队开始引入「Vue.js」开发移动端的产品.作为团队的领头人,我的首要任务就是设计 整体的架构 .一个良好的架构必定是具备丰富的开发经验后才能搭建出来的.虽然我有多年的前端开发经验,但就「Vue.js」来说,仍然是个新手.所幸「Vue.js」有一个配套工具「Vue-CLI」,它提供了一些比较成熟的项目模板,很大程度上降低了上手的难度.然而,很多具体的问题还是要自己思考和解决的. 项目划分 我们公司的H5产品大部分是嵌套在手机客户端里面的页面.每个项目的功能
-
vue.js组件之间传递数据的方法
前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关系.父子关系与兄弟关系(不是父子的都暂称为兄弟吧). 父子组件 父子关系即是组件 A 在它的模板中使用了组件 B,那么组件 A 就是父组件,组件 B 就是子组件. // 注册一个子组件 Vue.component('child', { data: function(){ text: '我是fathe
-
Vue.js上下滚动加载组件的实例代码
由于工作的需要并鉴于网上的vue.js滚动加载方案不合适,自己写了一个简单实用的.就短短的150行代码. 组件代码 // scrollLoader.vue // 滚动加载组件 <style scoped> .container-main {margin: 0 auto; overflow: auto; overflow-x: hidden; padding: 0;} .loading{ width: 100%; height: 40px; position: relative; overflo
-
vue.js移动端tab组件的封装实践实例
这是vue.js系列文章第二遍,第一篇讲述的是如何搭建vue.js的开发环境,计划按进度做成一款完整的app,当然前提是时间允许的话.本文用到了stylus语法,至于为什么使用stylus而不去用sass,主要是因为stylus来自于Node.js社区.总之stylus是一款高效的CSS预处理器,具体使用不在本文讨论范围.好了,废话不说了,下面讲述怎么封装tababr的切换. 底部tab进行页面切换,会用到vue里面的路由,也就是vue-router 我们在安装vue-cli时选中默认安装vu
-
Vue.js中兄弟组件之间互相传值实例
兄弟组件之间互相传值,需要建立一个"中转站"(新的vue实例),并且需要主动触发. 实例上的$on方法来接受监听. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件传值</title> <script src="vue.js"></script
-
解析Vue.js中的组件
介绍 在使用Vue.js时,Vue.js组件非常重要.在本教程中,我们将深入研究Vue.js组件,理解基础知识并将其应用于应用程序.让我们开始吧. 什么是组件? 组件使我们能够将 复杂的 应用程序分解成小块.例如,典型的Web应用程序将具有标题,侧边栏,内容和页脚等部分. Vue.js允许我们将每个部分分解成单独的模块化代码,称为组件.这些组件可以扩展,然后附加到 你 正在处理的应用程序. 使用 组件是 在 整个应用程序 编写 中重用代码的好方法. 假设 你 有一个博客应用程序,并且 你 想要显
-
Vue.js中的组件系统
vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能.本文详细介绍使用vue.js进行页面布局的强大工具,vue.js组件系统. Vue.js组件系统 每一个新技术的诞生,都是为了解决特定的问题.组件的出现就是为了解决页面布局等等一系列问题.vue中的组件分为两种,全局组件和局部组件. 组件的注册 全局组件的注册 通过Vue.component()创建一个全局组件之后,我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使
-
Vue.js中NaiveUI组件文字渐变的实现
目录 前言 渐变文字 封装渐变组件 定义props 实现组件效果 前言 NaiveUI中有着一个非常有意思的组件,就是渐变文字组件,如下图: 有意思的点是这段文字描述这个东西看起来没啥用,实际上确实没啥用. 这里我们用Vue3.2+TS来实现这个简单的小组件. 渐变文字 渐变文字的实现比较简单,利用background-clip属性就可以实现,该属性存在一个text属性值,它可以将背景作为文字的前景色,配合渐变就可以实现渐变文字了, 示例代码如下: <span class="ywz-gra
-
Vue如何解决兄弟组件之间传值问题
目录 解决兄弟组件之间传值问题 bus可以通过两种方式来实现 各类组件间传值方法(父子.兄弟.页级) 父子关系组件 兄弟关系组件 页级关系组件 解决兄弟组件之间传值问题 vue中 父组件向子组件传递参数时,可以通过prop来传递参数,prop可以是数组形式,也可以是对象格式,子向父组件传递参数时,通过$emit来传递,$emit('方法名', 传参),来实现子组件和父组件数据交互,但是在父组件中,有好多个子组件,这些子组件怎么样来进行数据通讯呢? 有的同学会立马想到 vuex ,答案是:可以的,
-
vuejs中父子组件之间通信方法实例详解
本文实例讲述了vuejs中父子组件之间通信方法.分享给大家供大家参考,具体如下: 一.父组件向子组件传递消息 // Parent.vue <template> <div class="parent"> <v-child :msg="message"></v-child> </div> </template> <script> import VChild from './child.v
-
Vue.js实战之组件之间的数据传递
前言 Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,components 文件夹下都是子组件. 一.父组件向子组件传递数据 在 Vue 中,可以使用 props 向子组件传递数据. 子组件部分: 这是 header.vue 的 HTML 部分,logo 是在 data 中定义的变量. 如果需要从父组件获取 logo 的值,就需要使用 props: [
-
vue.js指令和组件详细介绍及实例
大家好,本文给各位做一下vue.js一个最基本的概念介绍. vue.js 指令 <div id="app"> <div v-text="message"></div> </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) 这个例子我们会得到,v-text所在的div元素的内部插入了'Hello Vue!'这段字符串,那么我们为
-
vue.js中父组件调用子组件的内部方法示例
前言 今天同事问了一个问题,他在用iview开发时,需要用到iview一个组件的内部方法,而这个内部方法并没有暴露出来,这种情况下如何调用组件内部方法呢,其实很简单,举个栗子
-
vue中兄弟组件传值的两种方式小结
目录 一. bus总线传值的使用 二. 使用常规的传值:(子传父,父再传子) 总结 本demo主要是为了演示vue项目中兄弟组件之间的传值,这里我演示了两种方式: a. bus总线传值: b. 我自己一般把它当成常规的传值(其实也就是子组件A传父组件,父组件再传子组 件B) 下边开始本次demo的编写: 一. bus总线传值的使用 在项目中创建一个单独的eventBus.js文件 该js文件的内容很简单,就是暴露一个vue实例而已. 有人喜欢在main.js全局引入该js文件,我一般在需要使用到
随机推荐
- mysqldump备份还原和mysqldump导入导出语句大全详解
- 使用css实现全兼容tooltip提示框
- jquery判断RadioButtonList和RadioButton中是否有选中项示例
- Python内置函数dir详解
- php去除html标记的原生函数详解
- 批量复制数据
- C# 大小写转换(金额)实例代码
- 第二次聊一聊JS require.js模块化工具的基础知识
- 零基础入门篇之Linux及Arm-Linux程序开发笔记
- mysql安装笔记
- 使用 jQuery.ajax 上传带文件的表单遇到的问题
- 全面解析Java中的注解与注释
- C#中ZipHelper 压缩和解压帮助类
- Android AIDL实现跨进程通信的示例代码
- Android基于ViewPager+Fragment实现左右滑屏效果的方法
- 函数指针与指针函数的学习总结
- C#判断页面中的多个文本框输入值是否有重复的实现方法
- PHP实现的注册,登录及查询用户资料功能API接口示例
- Python从零开始创建区块链
- 搭建JavaWeb服务器步骤详解