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

vue中父子组件传值

作者：listener_zhang | 时间：2020-03-22 08:44 | 访问数： |

还是一个累加功能，代码如下：
  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>  

标签： vue

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

您可能喜欢

​vue中非父子组件传值

​vue中非父子组件传值

2020年03月22日 查看： 73

​安装Vue-cli爬坑

​安装Vue-cli爬坑

2019年03月21日 查看： 147

​使用vue全家桶高仿小米商城--vuex框架搭

​使用vue全家桶高仿小米商城--vuex框架搭

2020年01月30日 查看： 137

​vue中父子组件传值

​vue中父子组件传值

2020年03月22日 查看： 230

​Vue和jQuery实现数据双向绑定

​Vue和jQuery实现数据双向绑定

2019年03月27日 查看： 157

​使用vue全家桶高仿小米商城--订单父组件

​使用vue全家桶高仿小米商城--订单父组件

2020年02月06日 查看： 213

备案号：赣ICP备19013339号
回到顶部