广西建设厅网站培训中心,安阳吧 百度贴吧,wordpress user meta,软件开发需求分析模板#x1f308;个人主页#xff1a;前端青山 #x1f525;系列专栏#xff1a;Vue篇 #x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来vue篇专栏内容:vue-组件通信(二) 目录
组件通信(二)
#xff08;1#xff09; props / $emit
1. 父组件向子组…
个人主页前端青山 系列专栏Vue篇 人终将被年少不可得之物困其一生 依旧青山,本期给大家带来vue篇专栏内容:vue-组件通信(二) 目录
组件通信(二)
1 props / $emit
1. 父组件向子组件传值
2. 子组件向父组件传值
2eventBus事件总线$emit / $on
3依赖注入provide / inject
3ref / $refs
4$parent / $children
5$attrs / $listeners
6总结
组件通信(二)
组件通信的方式如下
1 props / $emit
父组件通过props向子组件传递数据子组件通过$emit和父组件通信
1. 父组件向子组件传值 props只能是父组件向子组件进行传值props使得父子组件之间形成了一个单向下行绑定。子组件的数据会随着父组件不断更新。 props 可以显示定义一个或一个以上的数据对于接收的数据可以是各种数据类型同样也可以传递一个函数。 props属性名规则若在props中使用驼峰形式模板中需要使用短横线的形式
父组件templatediv idfatherson :msgmsgData :fnmyFunction/son/div
/template
script
import son from ./son.vue;
export default {name: father,data() {msgData: 父组件数据;},methods: {myFunction() {console.log(vue);}},components: {son}
};
/script
复制代码 子组件templatediv idsonp{{msg}}/pbutton clickfn按钮/button/div
/template
script
export default {name: son,props: [msg, fn]
};
/script
复制代码
2. 子组件向父组件传值 $emit绑定一个自定义事件当这个事件被执行的时就会将参数传递给父组件而父组件通过v-on监听并接收参数。
父组件templatediv classsectioncom-article :articlesarticleList onEmitIndexonEmitIndex/com-articlep{{currentIndex}}/p/div
/template
script
import comArticle from ./test/article.vue
export default {name: comArticle,components: { comArticle },data() {return {currentIndex: -1,articleList: [红楼梦, 西游记, 三国演义]}},methods: {onEmitIndex(idx) {this.currentIndex idx}}
}
/script
复制代码
子组件templatedivdiv v-for(item, index) in articles :keyindex clickemitIndex(index){{item}}/div/div
/template
script
export default {props: [articles],methods: {emitIndex(index) {this.$emit(onEmitIndex, index) // 触发父组件的方法并传递参数index}}
}
/script
复制代码
2eventBus事件总线$emit / $on
eventBus事件总线适用于父子组件、非父子组件等之间的通信使用步骤如下 1创建事件中心管理组件之间的通信
// event-bus.js
import Vue from vue
export const EventBus new Vue()
复制代码
2发送事件 假设有两个兄弟组件firstCom和secondCom
templatedivfirst-com/first-comsecond-com/second-com/div
/template
script
import firstCom from ./firstCom.vue
import secondCom from ./secondCom.vue
export default {components: { firstCom, secondCom }
}
/script
复制代码
在firstCom组件中发送事件
templatedivbutton clickadd加法/button /div
/template
script
import {EventBus} from ./event-bus.js // 引入事件中心
export default {data(){return{num:0}},methods:{add(){EventBus.$emit(addition, {num:this.num})}}
}
/script
复制代码
3接收事件 在secondCom组件中发送事件
templatediv求和: {{count}}/div
/template
script
import { EventBus } from ./event-bus.js
export default {data() {return {count: 0}},mounted() {EventBus.$on(addition, param {this.count this.count param.num;})}
}
/script
复制代码
在上述代码中这就相当于将num值存贮在了事件总线中在其他组件中可以直接访问。事件总线就相当于一个桥梁不用组件通过它来通信。
虽然看起来比较简单但是这种方法也有不变之处如果项目过大使用这种方式进行通信后期维护起来会很困难。
3依赖注入provide / inject
这种方式就是Vue中的依赖注入该方法用于父子组件之间的通信。当然这里所说的父子不一定是真正的父子也可以是祖孙组件在层数很深的情况下可以使用这种方法来进行传值。就不用一层一层的传递了。
provide / inject是Vue提供的两个钩子和data、methods是同级的。并且provide的书写形式和data一样。 provide 钩子用来发送数据或方法 inject钩子用来接收数据或方法
在父组件中
provide() { return { num: this.num };
}
复制代码
在子组件中
inject: [num]
复制代码
还可以这样写这样写就可以访问父组件中的所有属性
provide() {return {app: this};
}
data() {return {num: 1};
}
inject: [app]
console.log(this.app.num)
复制代码
注意 依赖注入所提供的属性是非响应式的。
3ref / $refs
这种方式也是实现父子组件之间的通信。
ref 这个属性用在子组件上它的引用就指向了子组件的实例。可以通过实例来访问组件的数据和方法。
在子组件中
export default {data () {return {name: JavaScript}},methods: {sayHello () {console.log(hello)}}
}
复制代码
在父组件中
templatechild refchild/component-a
/template
scriptimport child from ./child.vueexport default {components: { child },mounted () {console.log(this.$refs.child.name); // JavaScriptthis.$refs.child.sayHello(); // hello}}
/script
4$parent / $children 使用$parent可以让组件访问父组件的实例访问的是上一级父组件的属性和方法 使用$children可以让组件访问子组件的实例但是$children并不能保证顺序并且访问的数据也不是响应式的。
在子组件中
templatedivspan{{message}}/spanp获取父组件的值为: {{parentVal}}/p/div
/template
script
export default {data() {return {message: Vue}},computed:{parentVal(){return this.$parent.msg;}}
}
/script
复制代码
在父组件中
// 父组件中
templatediv classhello_worlddiv{{msg}}/divchild/childbutton clickchange点击改变子组件值/button/div
/template
script
import child from ./child.vue
export default {components: { child },data() {return {msg: Welcome}},methods: {change() {// 获取到子组件this.$children[0].message JavaScript}}
}
/script
复制代码
在上面的代码中子组件获取到了父组件的parentVal值父组件改变了子组件中message的值。 需要注意 通过$parent访问到的是上一级父组件的实例可以使用$root来访问根组件的实例 在组件中使用$children拿到的是所有的子组件的实例它是一个数组并且是无序的 在根组件#app上拿$parent得到的是new Vue()的实例在这实例上再拿$parent得到的是undefined而在最底层的子组件拿$children是个空数组 $children 的值是数组而$parent是个对象
5$attrs / $listeners
考虑一种场景如果A是B组件的父组件B是C组件的父组件。如果想要组件A给组件C传递数据这种隔代的数据该使用哪种方式呢
如果是用props/$emit来一级一级的传递确实可以完成但是比较复杂如果使用事件总线在多人开发或者项目较大的时候维护起来很麻烦如果使用Vuex的确也可以但是如果仅仅是传递数据那可能就有点浪费了。
针对上述情况Vue引入了$attrs / $listeners实现组件之间的跨代通信。
先来看一下inheritAttrs它的默认值true继承所有的父组件属性除props之外的所有属性inheritAttrsfalse 只继承class属性 。 $attrs继承所有的父组件属性除了prop传递的属性、class 和 style 一般用在子组件的子元素上 $listeners该属性是一个对象里面包含了作用在这个组件上的所有监听器可以配合 v-on$listeners 将所有的事件监听器指向这个组件的某个特定的子元素。相当于子组件继承父组件的事件
A组件APP.vue
templatediv idapp//此处监听了两个事件可以在B组件或者C组件中直接触发 child1 :p-child1child1 :p-child2child2 test1onTest1 test2onTest2/child1/div
/template
script
import Child1 from ./Child1.vue;
export default {components: { Child1 },methods: {onTest1() {console.log(test1 running);},onTest2() {console.log(test2 running);}}
};
/script
复制代码
B组件Child1.vue
templatediv classchild-1pprops: {{pChild1}}/pp$attrs: {{$attrs}}/pchild2 v-bind$attrs v-on$listeners/child2/div
/template
script
import Child2 from ./Child2.vue;
export default {props: [pChild1],components: { Child2 },inheritAttrs: false,mounted() {this.$emit(test1); // 触发APP.vue中的test1方法}
};
/script
复制代码
C 组件 (Child2.vue)
templatediv classchild-2pprops: {{pChild2}}/pp$attrs: {{$attrs}}/p/div
/template
script
export default {props: [pChild2],inheritAttrs: false,mounted() {this.$emit(test2);// 触发APP.vue中的test2方法}
};
/script
在上述代码中 C组件中能直接触发test的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性 在B组件中通过v-bind 绑定$attrs属性C组件可以直接获取到A组件中传递下来的props除了B组件中props声明的
6总结
1父子组件间通信 子组件通过 props 属性来接受父组件的数据然后父组件在子组件上注册监听事件子组件通过 emit 触发事件来向父组件发送数据。 通过 ref 属性给子组件设置一个名字。父组件通过 $refs 组件名来获得子组件子组件通过 $parent 获得父组件这样也可以实现通信。 使用 provide/inject在父组件中通过 provide提供变量在子组件中通过 inject 来将变量注入到组件中。不论子组件有多深只要调用了 inject 那么就可以注入 provide中的数据。
2兄弟组件间通信 使用 eventBus 的方法它的本质是通过创建一个空的 Vue 实例来作为消息传递的对象通信的组件引入这个实例通信的组件通过在这个实例上监听和触发事件来实现消息的传递。 通过 $parent/$refs 来获取到兄弟组件也可以进行通信。
3任意组件之间 使用 eventBus 其实就是创建一个事件中心相当于中转站可以用它来传递事件和接收事件。
如果业务逻辑复杂很多组件之间需要同时处理一些公共的数据这个时候采用上面这一些方法可能不利于项目的维护。这个时候可以使用 vuex vuex 的思想就是将这一些公共的数据抽离出来将它作为一个全局的变量来管理然后其他组件就可以对这个公共数据进行读写操作这样达到了解耦的目的。
