vue自定义事件子组件把数据传出去

Posted 2020-09-18 街角小七

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue自定义事件子组件把数据传出去相关的知识，希望对你有一定的参考价值。

使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件

1、使用v-on绑定自定义事件

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script type="text/javascript"  src="vue.js"></script>
 7 </head>
 8 <body>
 9 <div id="counter-event-example">
10     <p>{{ total }}</p>
11     <button-counter v-on:increment="incrementTotal"></button-counter>
12     <button-counter v-on:increment="incrementTotal"></button-counter>
13 </div>
14 </body>
15     <script>
16         Vue.component(\'button-counter\', {
17             template: \'<button v-on:click="increment">{{ counter }}</button>\',
18             data: function () {
19                 return {
20                     counter: 0
21                 }
22             },
23             methods: {
24                 increment: function () {
25                     this.counter += 1
26                     this.$emit(\'increment\')
27                 }
28             }
29         })
30         new Vue({
31             el: \'#counter-event-example\',
32             data: {
33                 total: 0
34             },
35             methods: {
36                 incrementTotal: function () {
37                     this.total += 1
38                 }
39             }
40         })
41     </script>
42 </html>

输出结果：

2、使用自定义事件的表单输入组件

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script tyep="text/javascript" src="vue.js"></script>
 7 </head>
 8 <body>
 9     <div id="app">
10         <p>{{price}}</p>
11     <currency-input v-model="price"></currency-input>
12     </div>
13 </body>
14 <script>
15     Vue.component(\'currency-input\', {
16         template: \'<span>$ <input ref="input" v-bind:value="value" v-on:input="updateValue($event.target.value)" ></span>  \',
17         props: [\'value\'],
18         methods: {
19             // 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制
20             updateValue: function (value) {
21                 var formattedValue = value
22                     // 删除两侧的空格符
23                         .trim()
24                     // 保留 2 小数位
25                         .slice(0, value.indexOf(\'.\') + 3)
26                 // 如果值不统一，手动覆盖以保持一致
27                 if (formattedValue !== value) {
28                     this.$refs.input.value = formattedValue
29                 }
30                 // 通过 input 事件发出数值
31                 this.$emit(\'input\', Number(formattedValue))
32             }
33         }
34     })
35 
36     var price
37     new Vue({
38         el:\'#app\',
39         data:{
40             price:\'1\'
41         }
42 
43     })
44 </script>
45 </html>

输出结果：

以上是关于vue自定义事件子组件把数据传出去的主要内容，如果未能解决你的问题，请参考以下文章

vue小技能：组件间的数据传递

vue 组件间的通信

vue_cli组件通信个人总结--完整代码

vue组件-子组件向父组件传递数据-自定义事件

Vue 组件之间传参！

Vue-组件自定义事件

vue自定义事件 子组件把数据传出去

vue自定义事件子组件把数据传出去