父组件通过属性向子组件传值
单向数据流，父组件可以向子组件传值，子组件不能向父组件传值
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>vue</title>
6 </head>
7 <body>
8 <div id="app">
9 <counter :count="1" @inc="handleIncrease"></counter>
10 <counter :count="2" @inc="handleIncrease"></counter>
11 <div>{{total}}</div>
12 </div>
13
14 <!-- 开发环境版本，包含了用帮助的命令行警activeOne告 -->
15 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
16 <script>
17 var counter = {
18 props: [‘count‘],
19 data: function() {
20 return {
21 number:this.count
22 }
23 },
24 template: ‘<div @click="handleClick">{{number}}</div>‘,
25 methods: {
26 handleClick: function() {
27 this.number += 2;
28 this.$emit(‘inc‘, 2)
29 }
30 }
31 }
32 var app = new Vue({
33 el: ‘#app‘,
34 data: {
35 total: 3
36 },
37 components: {
38 counter:counter
39 },
40 methods: {
41 handleIncrease: function(step) {
42 this.total += step
43 }
44 }
45 })
46 </script>
47 </body>
48 </html>
原文地址：https://www.cnblogs.com/1032473245jing/p/9032715.html
时间： 2024-07-31 03:18:40