vue 解决兄弟组件、跨组件深层次的通信操作_vue.js

来源:脚本之家  责任编辑:小易  

先是入口点 main.jsimport App from './components/App.vue'router.start(App,'#app')然后在App.vue 也就是根组件里面声明router-viewrouter-view>www.zgxue.com防采集请勿采集本网。

兄弟组件之间的通信同样是在项目中经常会遇到的组件间的通信问题之一, 这种问题的最根本方法就是: 把兄弟组件内部的变量提升到一个中央仓库。

通过RequireJS、SeaJS这样的库来解决模块之间的相互依赖, 那么在React中是什么样子呢?结构和逻辑 在React的世界里,结构和逻辑交由JSX文件组织,React将模板内嵌到逻辑内部,实现了一个JS代码和HTML混合

借助父级组件链式交互

不需要export,直接import,Vue文件默认export default,话说你图片截图全点啊,都不知道你这文件之间关系,不懂追问,解决谢谢采纳!

使子组件1 通过 $emit 通知父级, 父级再通过响应 子组件1 的事件去触发子组件2的事件,这样的链式操作,在子组件不多的时候,但是一个不错的解决方法

关于这个你可以在每台需要渲染的电脑上装一个Vue安装文件里的Rendercow(也就类似渲染节点或者渲染奴隶)这种就不需要在每台要渲染的电脑装Vue制作软件了,然后通过局域网连接需要渲染的电脑,在

子组件1

解决方法: 1.去掉标签的scoped 属性,即使用全局样式 2.使用深度作用选择器/deep/,使用方式:将/deep/space空格 添加在第三方样式类的前面。如果是使用less语法的话,直接在第三方样式的最外一

<template> <div> <p @click="$emit('fromFirst','来自A组件')">first组件</p> </div></template><script> export default { name: 'first' }</script>

单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面

子组件2

<template> 子组件2 <div>{{secondInfo}}</div></template><script>export default { name: 'second', data() { return { this.secondInfo: null } }, created(){ this.$on('fromFather', (info) => { this.secondInfo = info }) }}</script>

父组件

<template> <first @fromFirst='handleFromFirst' /> <second ref='second' /> </template><script>import First from './first'import Scond from './second'export default { components: {First, Second}, data() { return { this.secondInfo: null } }, methods:{ handleFromFirst(val) { let second = this.$refs.second second.$emit('fromFather', val) } }}</script>

子组件1 触发父组件的 fromFirst 事件, 在事件中又触发了子组件2的 fromFather事件,并将从子组件1 传递过来的参数传递给了该事件, 当子组件2 执行该事件的时候,将内部的 secondInfo 改变。这就实现了一个兄弟组件的交互。

这个方式在 react 里面同样也是适用的, 但是如果父组件内包含了多个子组件并包含了复杂的逻辑, 有没有更好的方式来解决这种方式呢。

大部分第一个想到的是 vuex, 当然这在一个业务逻辑、数据复杂的项目中是一个很好的解决方法, 但是想象我们要编写一个通用组件,这个组件可能被用到不同的项目中来, 如果使用 vuex 这就要求每一个使用这个组件的项目中都要使用 vuex, 这显然是不好的。

借助中间文件,充当中央仓库

还好 ES6 的模块机制天然就支持建立一个中央仓库, 当 A 文件使用 import value from './b.js' 来引用 B 文件里面的 value 的时候, 这时就会赋值给 A 文件一个 B 文件的 value 的 只读引用, 当 B 文件里面的 value 的值发生变化的时候, A 文件里面的 value 也会跟着改变。

// lib.jsexport let counter = 3;export function incCounter() {counter++;}// main.jsimport { counter, incCounter } from './lib';console.log(counter); // 3incCounter();console.log(counter); // 4

定义一个额外的实例进行一个事件的中转,对于ES6 模块的运行机制已经有了一个讲解,当模块内部发生变化的时候,引入模块的部分同样会发生变化,当又一个额外的实例对加载机制进行引入进行emit与emit与emit与on进行绑定通信,能轻而易举解决问题,通过b->a->c的模式直接过渡。

解决 vue 兄弟组件之间的通信我们同样也可以使用中央仓库的方式来实现。

// store.js 作为中央仓库import Vue from 'vue'export default new Vue()

通过 new 一个 vue 的实例当作兄弟组件交互的中央仓库。

父级组件

<template> <first/> <second/> </template><script>import First from './first'import Scond from './second'export default { components: {First, Second}}</script>

父组件只是引入子组件, 不再作为中央仓库来过渡交互。

子组件1

解决方法: 1.去掉标签的scoped 属性,即使用全局样式 2.使用深度作用选择器/deep/,使用方式:将/deep/space空格 添加在第三方样式类的前面。如果是使用less语法的话,直接在第三方样式的最外一

<template> <div @click='hanleClick'>子组件1</div></template><script>import Store from './store'export default { name: 'first', methods: { handleClick() { Store.$emit('fromFirst', '来自子组件1的传值') } }}</script>

因为我们的目的就是把 Store 作为一个中央仓库,这里我们把 fromFirst 事件添加到了 Store 上面而不是当前组件 this 上。

子组件2

<template> 子组件2 <div>{{secondInfo}}</div></template><script>import Store from './store'export default { name: 'second', data() { return { this.secondInfo: null } }, created(){ Store.$on('fromFirst', (info) => { this.secondInfo = info }) }}</script>

子组件2 里面同样也是使用 Store 实例来监听 fromFirst 事件, 因为子组件1和子组件2里面添加事件和监听事件的是同一个实例,根据我们在上文中分析的 ES6 中的情况, 当 Store 添加了 fromFirst 这个时间之后, Store实例的 $on 就可以监听到这个事件并执行回调。

跨组件深层次交互

上面讲的组件之间的关系是这样的:

我们可以实现 子组件之间的交互, 但是如果我们遇到这种情况呢?

孙组件需要跟子组件3 进行交互,还是使用上述的方法可以做到吗? 答案是肯定的,只要能够使用同一个中央仓库,那么不管什么层级的组件复杂度,都是可以实现两者的交互的。

补充知识:Vue组件跨层级通信

正常组件间通信

父->子组件 是通过属性传递

子->父组件 是通过this.$emit()传递

this.$emit()返回的是this,如果需要一些值 可使用callback方式传递

provide 和 inject

这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,

不论组件层次有多深,并在起上下游关系成立的时间里始终生效。

provide 和 inject 绑定并不是可响应的。这是刻意为之的。

然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。

provide提供数据,多层子组件 向上层寻找,只要找到 就不在向上层寻找了.

inject 向子组件注入数据

使用方式

第一种方式(传递对象,使用字符串数组接收)

// 父级组件提供 'foo'var Provider = { provide: { foo: 'bar' }, // ...}// 子组件注入 'foo'var Child = { inject: ['foo'], created () { console.log(this.foo) // => "bar" } // ...}

第二种方式(传递返回对象的函数, 使用对象接收)

provide() { return { // 2.6.0 版本之前 通常传递this. 但这样的话 会传递很多用不到的属性 theme: { color: 'xxx' //如果传入可响应的数据,这里的属性还是可响应的 } };}inject: { //这里可以换成其它名字 theme: { from: "theme", // 数据来源 default: () => ({}) //降级情况下使用的 value //可以是 普通值 //可以是 对非原始值使用一个工厂方法 }}//正常子组件this.theme //即可访问//子组件是函数式组件的使用方式injections.theme.color

Vue.observable( object )

让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。

可以作为最小化的跨组件状态存储器,用于简单的场景

提供数据可改为

provide() { //这时提供的theme 则为可响应的数据 this.theme = Vue.observable({ color: "blue" }); return { theme: this.theme };},

以上这篇vue 解决兄弟组件、跨组件深层次的通信操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持真格学网。

先是入口点 main.jsimport App from './components/App.vue'router.start(App,'#app')然后在App.vue 也就是根组件里面声明router-viewrouter-view>内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • vue组件间通信六种方式(总结篇)
  • vue中组件通信的八种方式(值得收藏!)
  • vue.js每天必学之组件与组件间的通信
  • 详解vue 非父子组件通信方法(非vuex)
  • vue中用 async/await 来处理异步操作
  • vue axios发送跨域请求需要注意的问题
  • vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
  • 基于vue的短信验证码倒计时demo
  • vue的基本用法与常见指令
  • 详解axios 如何取消已发送的请求
  • vue click.stop阻止点击事件继续传播的方法
  • vue-router实现组件间跳转的三种方法
  • 关于vue的npm run dev和npm run build的区别介绍
  • 详解vue 换肤方案验证
  • vue-router应用于组件内时的矛盾怎么解决?
  • vue-router应用于组件内时的矛盾怎么解决
  • vue-router应用于组件内时的矛盾怎么解决
  • vue 引用另一个组件出现错误,跪求解决的方法
  • vue 父组件导入文件子组件还需要引入吗
  • vue组件导出问题
  • 如何解决vue单文件组件渲染问题
  • Vue怎么修改第三方组件属性
  • vue-router应用于组件内时的矛盾怎么解决
  • vue,组件加载时序和数据处理时序之间的不和谐问题
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全yui.ext相关prototypejqueryangularjsjsonlib_jsjs面向对象extjsmootoolsseajsdojovue.jsbackbone.js其它首页javascriptjavascript类库vue组件间通信六种方式(总结篇)vue中组件通信的八种方式(值得收藏!)vue.js每天必学之组件与组件间的通信详解vue 非父子组件通信方法(非vuex)vue中用 async/await 来处理异步操作vue axios发送跨域请求需要注意的问题vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果基于vue的短信验证码倒计时demovue的基本用法与常见指令详解axios 如何取消已发送的请求vue click.stop阻止点击事件继续传播的方法vue-router实现组件间跳转的三种方法关于vue的npm run dev和npm run build的区别介绍详解vue 换肤方案验证vue引用js文件的多种方式(推荐)vue之父子组件间通信实例讲解(pr简单理解vue中props属性vue props用法详解(小结)vue元素的隐藏和显示(v-show指令vue.js常用指令汇总(v-if、v-fovue 进阶教程之v-model详解使用vue实现图片上传的三种方式vue.js实战之利用vue-router实现vue实现文件上传功能浅谈vuejs实现数据驱动视图原理vue项目中定义全局变量、函数的几种方法mpvue跳转页面及注意事项vue小白入门教程vue 实现复制内容到剪贴板的两种方法vue vantui tab切换时 list组件不触发loa基于axios封装fetch方法及调用实例详解vue.js中.native修饰符vue官方文档梳理之全局配置vue学习笔记进阶篇之vue-router安装及使用
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved