Vue组件通信的几种实现方法
组件通信
一般组件之间的常用通信有以下几种情况:A和B,B和C,B和D都是父子关系,C和D是兄弟组件。
有两种常见的沟通方式:
1.ref:注册元素或组件的参考信息
2.children:访问父组件和子组件的实例。
这两种方法都是通过实例直接得到的。例子如下:
//comA组件a导出默认值{ data(){ return { title : ' test communication ' } },方法: { say hello(){ window . alert(' hello ');}}}此处引用了组件a
template CoMa ref=' CoMa '/CoMa/template script导出默认值{ mounted () { const comA=this。$ refs.comAconsole . log(CoMa . title);//测试通信CoMa . SayHello();//调用组件comA}的方法} }/脚本上面的例子说明了我们使用ref来获取组件实例上的方法和数据
div id=' count ' button @ click=' show msg '显示两个组件的信息/button child 1/child 1 child 2/child 2/div模板id=' child 1 ' div { { msg } }/div/template template id=' child 2 ' div { { msg } }/div/template script vue.component(' child 1 ',{ template: '#child1 ',Data () {return {msg: '这是子组件1'}})的信息)vue.component ('child2。我喜欢这个。$ children.lengthI) {alert(这个。$孩子[我]。msg)}}})/script $ children返回所有子组件的实例,这是一个数组
div ID=' count ' msg : { { msg } } child 1 ref=' C1 '/child 1 child 2 ref=' C2 '/child 2/div模板ID=' child 1 ' div { { msg } } Button @ click=' show pmsg '显示父组件msg/Button/div/template template ID=' child 2 ' div { { msg } }/div/template scriptvue.component(' child 1 ',{template3360' # child1 ',data () {return {msg: '$ parent . msg)} })vue.component(' child 2 ',{ template: '#child2 ',Data () {return {msg: '这是子组件2 ' } })new vue({ El : ' # count ',Data : { msg 3360 ' hello parent ' })/script是基于组件上下文访问父组件或所有子组件(数组)的两种方式。这种方法有一个很大的缺点,就是不能跨级别或者兄弟之间进行通信,比如下面的结构
//parent . vuecocomponent-a/component-a component-b/component-b component-c/component-c如果我们想得到组件a中的其他组件,可能需要使用vuex或者Bus事件总线来解决。
事件总线
定义事件总线有两种方法
//bus.js事件总线从' vue '导入vue导出const $ bus=newvue ()//main.js我们定义这个事件总线Vue.prototype.$bus=new Vue()在主入口发送事件
对于下面的comA描述,将接收并显示来自父组件的参数号;有一个按钮,点击它会调用函数handleAddRandom,生成一个随机数,并调用事件总线的$emit方法,将随机数交给事件总线,事件总线会传输数据。
模板div {{number}}按钮@ click=' handleadrandom '随机添加/按钮/div/模板脚本导入$ bus自./bus.js导出默认值{name :' counter ',prop s : { Number : { type : Number } },methods : { handleAddRandom(){ const num=math . floor(math . random()* 100 ^ 1);console . log(' producted num : ' num);这个。$巴士。$emit('add ',num);} } }/脚本接收事件
模板div随机添加了:计数器: number=' number '/counter/div/模板脚本导入计数器from '。/counter ' export default { name : ' index },components: { counter },data() { return { number: 0 } },methods : { handleAddRandom(num){ this . number=num;} },创建了(){//this。$巴士。$on需要在created中使用,否则它不会生效。$巴士。$ on ('add ',这个。handleadrandom);},beforeDestroy() {//This。$巴士。$ off ('add ',这个。handleadrandom)需要从beforeDestroy中删除;} }/scriptstyle作用域/style以上,我们通过事件总线进行通信
那么让我们来谈谈另一种可以与Vuex相媲美的提供/注入方式
提供/注入
说到这两个API,你可能不明白。让我们举个例子
//A组件export default { provide : { name : ' aresn ' } }//b组件export default { inject :[' name '],mounted(){ console . log(this . name);//Arsen } }代码中,我们可以看到我们在组件a中设置了一个provide : { name:' Arsen ' },这个方法的作用是将这个变量提供给所有的子组件。在b组件中,我们使用indect来获取这个变量,这样我们就可以使用this.name来获取这个变量。现在我们可以用一些技巧来大胆替换Vuex。(这里解释一下,不建议我们在官网使用这两个API。在一般应用中,建议在高级组件中使用它们。建议好好使用。)
使用提供/注入来预期Vuex
template div router-view/router-view/div/template script export default { }/script vue CLI会有一个app.vue作为入口组件,所以我们可以用这个API来大做文章。脚本导出默认{ provide(){ return { app : this } },data(){ return { userinfo : null } },Methods: {getUserInfo () {//这里,通过ajax获取用户信息后,将其分配给this.userInfo .下面是伪代码$。Ajax ('/user/info ',(数据)={this。userinfo=数据;});} },挂载(){ this . GetUserInfo();} }/script在这里,我们将根组件实例作为参数传递给app变量,然后通过app[变量| |方法]就可以达到vuex的目的
模板div { { app }。user info } }/div/模板脚本导出默认{inject: ['app'],methods : { change user info(){//在此处修改用户数据后,通知app.vue更新。下面是伪代码$。ajax('/user/update ',()={//app . vue中的this.app.getUserInfo()方法可以通过这个直接调用。})}} }/script,但是这样做有一个缺点,那就是可能会让根组件app.vue的代码特别臃肿。当然,有解决办法。我们可以使用mixin将不同的逻辑分别写入不同的js,然后通过mixin :[mixin _ user]在app.vue中引用这个mixin。
以上就是本文的全部内容。希望对大家的学习有帮助,支持我们。
版权声明:Vue组件通信的几种实现方法是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。