一个菜鸟的互联网技术分享博客
您的位置: 主页 > vue中ref的使用
advertisement

vue中ref的使用

下面代码时正常运行的:点击累加
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title>vue使用组件的细节</title>  
  6.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  7.     </head>  
  8.     <body>  
  9.         <div id="app">  
  10.             <counter></counter>  
  11.             <counter></counter>  
  12.         </div>  
  13.     </body>  
  14.     <script>  
  15.         //定义组件  
  16.         Vue.component('counter',{  
  17.             template:'<div @click="handleClick">{{number}}</div>',  
  18.             data:function(){  
  19.                 return {  
  20.                     number:0  
  21.                 }  
  22.             },  
  23.             methods:{  
  24.                 handleClick(){  
  25.                     this.number ++  
  26.                 }  
  27.             }  
  28.         })  
  29.           
  30.         var t = new Vue({  
  31.             el:'#app'  
  32.         })  
  33.     </script>  
  34. </html>  
现在有一个需求就是:点击两个counter求你们的和
代码如下:

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title>vue使用组件的细节</title>  
  6.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  7.     </head>  
  8.     <body>  
  9.         <div id="app">  
  10.             <counter ref="one" @change="handleChange"></counter>  
  11.             <counter ref="two" @change="handleChange"></counter>  
  12.             <div>{{total}}</div>  
  13.         </div>  
  14.     </body>  
  15.     <script>  
  16.         //定义组件  
  17.         Vue.component('counter',{  
  18.             template:'<div @click="handleClick">{{number}}</div>',  
  19.             data:function(){  
  20.                 return {  
  21.                     number:0  
  22.                 }  
  23.             },  
  24.             methods:{  
  25.                 handleClick(){  
  26.                     this.number ++;  
  27.                     this.$emit('change')  
  28.                 }  
  29.             }  
  30.         })  
  31.           
  32.         var t = new Vue({  
  33.             el:'#app',  
  34.             data:{  
  35.                 total:0  
  36.             },  
  37.             methods:{  
  38.                 handleChange(){  
  39.                     this.total = this.$refs.one.number + this.$refs.two.number  
  40.                 }  
  41.             }  
  42.         })  
  43.     </script>  
  44. </html>  
点击体验
zhangren.online
上一篇:vue使用组件的细节
下一篇:vue中父子组件传值

您可能喜欢

​vue中非父子组件传值

​vue中非父子组件传值

​vue中ref的使用

​vue中ref的使用

回到顶部