一个菜鸟的互联网技术分享博客
您的位置: 主页 > vue中非父子组件传值
advertisement

vue中非父子组件传值

在一个技术交流群里一个书“码友”问了我一个非父子组件传值的问题,叫我写个Demo给他看,好心的我就写了一个过去,顺便记录下小细节,代码如下:
需求:点击第一个组件本身其他组件的内容变为点击组件的内容

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title>vue中非父子组件传值(bus/总线/发布订阅者模式/观察者模式)</title>  
  6.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  7.     </head>  
  8.     <body>  
  9.         <div id="app">  
  10.             <child content="zhang"></child>  
  11.             <child content="ren"></child>  
  12.         </div>  
  13.     </body>  
  14.     <script>  
  15.         Vue.prototype.bus = new Vue()   //创建类  
  16.           
  17.         //定义组件Child  
  18.         Vue.component('child',{  
  19.             props:{  
  20.                 content:String  
  21.             },  
  22.             template:'<div @click="handleClick">{{content}}</div>',  
  23.             methods:{  
  24.                 handleClick(){  
  25.                     this.bus.$emit('change',this.content)  
  26.                 }  
  27.             },  
  28.             mounted() {  
  29.                 var this_ = this;  
  30.                 //监听bus的改变  
  31.                 this.bus.$on('change',function(res){  
  32.                     this_.content = res 
  33.                 })     
  34.             }  
  35.         })  
  36.           
  37.         var t = new Vue({  
  38.             el:'#app'  
  39.         })  
  40.     </script>  
  41. </html>  
运行代码在不打开控制台的时候是可以实现的,但是打开后就发现有警告,如下图所示:

原因:child组件中的content是从父组件从传递过来的,子组件可以使用但是不能直接改变父组件传递过来的值(单向数据流),因此我们要借助一个参数存储这个父组件传递过来的值,代码如下:

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title>vue中非父子组件传值(bus/总线/发布订阅者模式/观察者模式)</title>  
  6.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  7.     </head>  
  8.     <body>  
  9.         <div id="app">  
  10.             <child content="zhang"></child>  
  11.             <child content="ren"></child>  
  12.         </div>  
  13.     </body>  
  14.     <script>  
  15.         Vue.prototype.bus = new Vue()   //创建类  
  16.           
  17.         //定义组件Child  
  18.         Vue.component('child',{  
  19.             data:function(){  
  20.                 return{  
  21.                     selfContent:this.content   //处理组件传递过来的content  
  22.                 }  
  23.             },  
  24.             props:{  
  25.                 content:String  
  26.             },  
  27.             template:'<div @click="handleClick">{{selfContent}}</div>',  
  28.             methods:{  
  29.                 handleClick(){  
  30.                     this.bus.$emit('change',this.selfContent)  
  31.                 }  
  32.             },  
  33.             mounted() {  
  34.                 var this_ = this;  
  35.                 //监听bus的改变  
  36.                 this.bus.$on('change',function(res){  
  37.                     this_.selfContent = res  
  38.                 })     
  39.             }  
  40.         })  
  41.           
  42.         var t = new Vue({  
  43.             el:'#app'  
  44.         })  
  45.     </script>  
  46. </html>
测试代码链接
zhangren.online
上一篇:vue中父子组件传值
下一篇:没有了

您可能喜欢

​Vue的生命周期及代码实例

​Vue的生命周期及代码实例

​安装Vue-cli爬坑

​安装Vue-cli爬坑

​vue使用组件的细节

​vue使用组件的细节

回到顶部