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

vue中父子组件传值

还是一个累加功能,代码如下:
  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 :counte="1"></counter>  
  11.             <counter :counte="2"></counter>  
  12.         </div>  
  13.     </body>  
  14.     <script>  
  15.         //定义组件  
  16.         var counter = {  
  17.             props:['counte'],  
  18.             template: '<div @click="handleClick">{{counte}}</div>',  
  19.             methods: {  
  20.                 handleClick(){  
  21.                     this.counte ++  
  22.                 }  
  23.             }  
  24.         }  
  25.           
  26.         var t = new Vue({  
  27.             el:'#app',  
  28.             components:{  
  29.                 counter  
  30.             }  
  31.         })  
  32.     </script>  
  33. </html>  
这个代码是可以运行的,也可以使子组件中的数据加1的,但是控制台里面会出现报错信息,如下图所示:

提示的意思是:你不要直接修改父组件传递过来的数据 --》在vue中有一个单向数据流的概念:父组件可以通过属性的形式向子组件传递参数,但是子组件绝对不能直接修改父组件传递过来的参数
解决bug并修改上面代码,如下所示

  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 :counte="1"></counter>  
  11.             <counter :counte="2"></counter>  
  12.         </div>  
  13.     </body>  
  14.     <script>  
  15.         //定义组件  
  16.         var counter = {  
  17.             props:['counte'],  
  18.             template: '<div @click="handleClick">{{number}}</div>',  
  19.             data:function(){  
  20.                 return{  
  21.                     number:this.counte  
  22.                 }  
  23.             },  
  24.             methods: {  
  25.                 handleClick(){  
  26.                     this.number ++  
  27.                 }  
  28.             }  
  29.         }  
  30.           
  31.         var t = new Vue({  
  32.             el:'#app',  
  33.             components:{  
  34.                 counter  
  35.             }  
  36.         })  
  37.     </script>  
  38. </html> 
浏览器上面的提示信息解决

最终代码如下:

  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 :counte="1" @inc="handlenumberinc"></counter>  
  11.             <counter :counte="2" @inc="handlenumberinc"></counter>  
  12.             <div>{{total}}</div>  
  13.         </div>  
  14.     </body>  
  15.     <script>  
  16.         //定义组件  
  17.         var counter = {  
  18.             props:['counte'],  
  19.             template: '<div @click="handleClick">{{number}}</div>',  
  20.             data:function(){  
  21.                 return{  
  22.                     number:this.counte  
  23.                 }  
  24.             },  
  25.             methods: {  
  26.                 handleClick(){  
  27.                     this.number =this.number + 2;  
  28.                     this.$emit('inc',2)  
  29.                 }  
  30.             }  
  31.         }  
  32.           
  33.         var t = new Vue({  
  34.             el:'#app',  
  35.             components:{  
  36.                 counter  
  37.             },  
  38.             data:{  
  39.                 total:3  
  40.             },  
  41.             methods:{  
  42.                 handlenumberinc(step){  
  43.                     //step:就是子组件中的每次累加的数字  
  44.                     this.total += step  
  45.                 }  
  46.             }  
  47.         })  
  48.     </script>  
  49. </html>  

zhangren.online
上一篇:vue中ref的使用
下一篇:vue中非父子组件传值

您可能喜欢

回到顶部