vue组件之监听子组件事件

上一篇内容我们了解了vue组件中关于prop选项的内容,props选项实现了父组件向子组件的数据传递,这篇我们将了解一下子组件与父组件进行通信。

$emit()方法

子组件使用 $emit()方法触发父组件事件。在父组件中通过v-on指令监听子组件的自定义事件,然后自定义事件执行 $emit()方法触发父组件事件,这样就可以实现子组件和父组件之间的通信

    <div id="app">
        <post-item :value="arr" @greet="fatherClick"></post-item>
    </div>
    <script>
        Vue.component('PostItem', {
            props: [
                'value'
            ],
            methods: {
                click() {
                    this.$emit('greet', '这是通过$emit方法触发')
                }
            },
            template: '<h3> <button type="button" v-on:click="click">点击一下</button></br> {{ value }}</h3>'
        })
        let vm = new Vue({
            el: "#app",
            data: {
                arr: ""
            },
            methods: {
                fatherClick(value) {
                    this.arr = value;
                }
            }
        })
    </script>

通过$emit方法的第一个参数是事件名,第二个参数是参数
在上述案例中,在我们先监听子组件的单击事件,当触发单击事件后执行子组件的click方法,然后click方法触发父组件中的fatherClick方法,并将参数传递过去。

在这里插入图片描述
在这里插入图片描述

.sync修饰符

在vue中,一个组件通过prop属性传递数据是单向的,父组件可以将数据传递到子组件。但是在特殊情况下,需要对一个组件的prop进行双向绑定,vue提供了一个update:myPropName模式触发事件来实现双向绑定。看下列案例:

 <div id="app">
        <span>计数器的值:{{ counter }}</span>
        <parent :val="counter" v-on:update:count="counter = $event"></parent>
    </div>
<script>
        Vue.component('parent', {
            props: {
                count: {
                    type: Number,
                    define: 0
                }
            },
            template: `
            <div>
                <span>计数:{{ count }}</span>    
                <button @click="Click">添加计数</button> 
            </div>
            `,
            methods: {
                Click() {
                    this.$emit('update:count', ++this.count);
                }
            },
        })
        let vm = new Vue({
            el: "#app",
            data: {
                counter: 0
            }
        })
    </script>

在这个组件中有一个名为 count的prop,点击按钮的单击事件,调动 $emi(()方法触发 update:val事件, 并将加 1 之后的计数值作为事件的附加参数。

在父组件中,使用 v-on指令监听 update:val事件,这样就可以接收子组件传递过来的数据,然后使用 v-bind 指令绑定子组件中名为 count 的 prop,就可以实现给子组件传递父组件的数据,这样就实现了数据的双向绑定。

其中$event是自定义的事件的附加参数,而update:val事件是一个自定义事件,所以其参数就是加 1 之后的计数值。
在这里插入图片描述

在上面我们实现的数据双向绑定比较复杂,vue 提供了.sync修饰符简化了数据的双向绑定,如下所示修改:

<parent :count.sync="counter"></parent>

需要注意的是,在这种简化方式,一定要确保 prop 中的参数和 需要出发的事件同名,且事件名必须是update:开头,如下所示:

<parent :count.sync="counter"></parent>
this.$emit('update:count', ++this.count);
 props: {
                count: {
                    type: Number,
                    define: 0
                }
            },

//如果进行修改,则同时改变
<parent :ss.sync="counter"></parent>
 this.$emit('update:ss', ++this.ss);
  props: {
                ss: {
                    type: Number,
                    define: 0
                }
            },

.native修饰符

.native修饰符主要是将原生事件绑定到组件。

 <div id="app">
      <div :style="'font-size:'+fontsize+'em'">
         <parent v-for="book of books" :book="book" @click.native="fangda"></parent>
      </div>
</div>
Vue.component('parent', {
    props: ['book'],
    template: `
    <div>
        <p>{{ book.title }}</p>    
        <button>放大字体</button>
        <p>{{ book.content }}</p>    
    </div>
     `,
})
let vm = new Vue({
            el: "#app",
            data: {
                fontsize: 1,
                books: [{
                    title: "朝花夕拾",
                    content: "鲁迅的文章",
                    id: 1
                }, {
                    title: "时间简史",
                    content: "反正我不喜欢看,但是她很出名",
                    id: 2
                }]
            },
            methods: {
                fangda() {
                    this.fontsize++;
                }
            }
        })

在这里插入图片描述

在上述案例中,我们将点击事件通过.native修饰符添加到了组件根元素上,导致点击任何文字都会将字体放大。

但我们需要的效果是点击按钮放大文字,所以我们需要通过$listeners属性将组件所有的事件监听器全部转发到特定的子元素

Vue.component('parent', {
    props: ['book'],
    template: `
    <div>
        <p>{{ book.title }}</p>    
        <button v-on="$listeners">放大字体</button>
        <p>{{ book.content }}</p>    
    </div>
     `,
})

上述案例就是当单击按钮之后才能修改文本大小。需要注意的是$listeners属性虽然会将所有的事件监听转发到特定的子元素,但是不包括通过.native修饰的事件

相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页