Vue 组件(二)子组件向父组件传递数据

原创 2018年04月16日 22:48:16

子组件向父组件传递数据有一下两种方式:

1、自定义事件

子组件用”$emit()“来触发事件,父组件用”$on()“来监听子组件事件。父组件也可以直接在子组件的自定义标签上使用” v-on ” 来监听子组件触发的自定义事件。(因为” v-on “除了监听DOM事件外,还可以用于组件间的自定义事件。)

示例代码:

<div id="app">
            <p>{{total}}</p>
            <my-component 
                @increace="getTotal"
                @reduce="getTotal"></my-component>
</div>
<script>    
        Vue.component('my-component',{
            template:`\
               <div>\
                  <button @click="increaceTotal">增加</button>\
                  <button @click="reduceTotal">减少</button>\
               </div>`,

            data: function(){
                return{
                    counter:0
                } 
            },
            methods:{
                increaceTotal:function(){
                    this.counter ++;
                    this.$emit('increace',this.counter);
                },
                reduceTotal:function(){
                    this.counter --;
                    //$emit()第一个参数是自定义事件名称,
                    //第二个参数是要传递的数据,可以不填或填写多个
                    this.$emit('reduce',this.counter);
                }

            }
        });     
        new Vue({
            el:'#app',
            data:{
                total:0
            },
            methods:{
                getTotal:function(total){
                    this.total = total;
                }
            }
        })      
</script>

上面例子中,子组件有两个按钮,实现加1和减1的效果,在改变组件的 data:”counter” 后,通过 $emit()再把它传递给父组件,父组件通过 v-on:increacev-on:reduce(示例中使用了语法糖)来监听。

运行效果:
这里写图片描述

2、使用 v-model 指令
示例代码:

<div id="app">
    <p>总数:{{total}}</p>
    <my-component v-model="total"></my-component>
</div>
<script>
    Vue.component('my-component',{
            template:`<button @click="handleClick">++1</button>`,
                data: function(){
                    return{
                        counter:0
                    }
                },
                methods:{
                    handleClick:function(){
                        this.counter++;
                          //组件$emit()事件名是特殊的input
                        this.$emit('input',this.counter);
                    }
                }
            });

            new Vue({
                el:'#app',
                data:{
                    total:0
                }               
            })
            /*
             组件$emit()事件名是特殊的input,
             * 在使用组件的父级直接用了 v-model 绑定的一个数据 total.
             * 可以间接的用自定义事件来实现。
             * */
</script>

这里写图片描述
上面的示例仍然是点击按钮加1的效果,不过这次组件$emit()事件名是特殊的input ,在使用组件的父级,并没有在<my-component>上使用 v-on:increace = "handle" 这样的监听器,而是直接使用了 v-model 绑定的一个 total
这也可以称作一种语法糖,因为上例可以间接的用自定义事件来实现,如下:

<div id="app">
    <p>总数:{{total}}</p>
    <my-component @input="handle"></my-component>
</div>
<script>
        Vue.component('my-component',{
               //.....省略组件代码
            });

        new Vue({
            el:'#app',
            data:{
                  total:0
                },
            methods:{
                  handle:function(counter){
                  this.total = counter;
                    }
                }
            })          
</script>

运行结果和上例相同。

v-model 创建自定义表单输入控件,进行数据双向绑定。

示例如下:

<div id="app">
    <p>总数:{{total}}</p>
    <my-component v-model="total"></my-component>
    <button @click="handleReduce">-1</button>
</div>
<script>
    Vue.component('my-component',{
          props:['value'],
          template:`\
            <input :value="value" @input="updateValue"></input>`,
          methods:{
                    updateValue:function(event){
                        this.$emit('input',event.target.value);
                    }
                }
            });         
    new Vue({
            el:'#app',
            data:{
                total:0
                },
            methods:{
                    handleReduce:function(){
                        this.total--;
                    }
                }
            })          
            /*
             实现这样一个具有双向绑定的v-model组件要满足下面两个要求
             * 1、接收一个value属性
             * 2、在有新的value时出发input事件
             * */
</script>

运行结果:
这里写图片描述
这里写图片描述

版权声明:本文为博主原创文章,转载请注明出处 https://blog.csdn.net/miss_zxm/article/details/79968003

Android开发高级组件与框架——图片缓存组件

介绍图片缓存组件Universal-image-loader、Picasso、Glide、Fresco的使用与特点比较,传说中的三级缓存实现揭秘。
  • 2017年01月04日 15:43

vue 子组件向父组件传递数据

子组件向父组件传递数据
  • xiaobafacai
  • xiaobafacai
  • 2017-10-11 16:28:37
  • 155

vue-子组件向父组件传值

子组件注册触发事件,父组件注册 触发子组件事件后的方法写在method里面 父组件这么写 Do you like me? {{childWords}} methods: { ...
  • yu88288356
  • yu88288356
  • 2017-02-06 17:22:38
  • 28870

父组件向子组件传递数据(vue.js)

父组件: app.vue 子组件: header.vue 子组件: {{logo}}(我是父组件传递过来的值) {{na...
  • heartAndthink
  • heartAndthink
  • 2017-07-03 17:53:10
  • 3384

Vue之父组件向子组件传递数据

Vue
  • tian361zyc
  • tian361zyc
  • 2017-06-03 00:27:47
  • 5480

vue 子组件向父组件传递参数

vue自定义事件每个vue实例都实现了事件接口,即$on(),$emit() 都是vue实例的方法,所以在vue选项上需要this来指定。 $on() 事件监听-作用与父组件作用域子组件标签上 $e...
  • evendetail
  • evendetail
  • 2017-11-24 11:46:20
  • 148

Vue2.0 子组件传值给父组件

this.$emit(event,...args); /* * event: 要触发的事件 * args: 将要传给父组件的参数 */ Usage: 子组件内容: methods:{ ...
  • u013240543
  • u013240543
  • 2017-03-31 11:25:14
  • 19058

vue子组件向父组件传值问题

Vue子组件向父组件传递数据: http://blog.csdn.net/yu88288356/article/details/54895033
  • qq_37962545
  • qq_37962545
  • 2017-11-28 13:54:10
  • 201

vue父组件与子组件间如何进行数据传递

vue父组件和子组件间怎么进行数据传递 父组件传递数据给子组件(可以通过props属性来实现): 由于组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让...
  • qilanbei
  • qilanbei
  • 2017-09-22 11:51:29
  • 2994

vue父组件向子组件传递多个数据

在平时我们使用VUE组件的时候,经常需要将父组件的某些数据传递给子组件,这个时候,我们通常会有很多的办法,这里主要分为两种情况:第一种:静态数据传递:传递一个 字符串 第二种:动态数据传递:绑定一个...
  • qq_24147051
  • qq_24147051
  • 2017-06-27 18:28:01
  • 958
收藏助手
不良信息举报
您举报文章:Vue 组件(二)子组件向父组件传递数据
举报原因:
原因补充:

(最多只允许输入30个字)