$emit的用法

痛定思痛。 2022-03-29 17:05 230阅读 0赞

父组件中调用子组件时绑定事件，在子组件中使用$emit方法调用该事件并传参

父组件:

<template>
        <section>
            <h2>emit</h2>
            <code></code>
            <ul>
                <li>
                    <strong>html中调用</strong>
                    <emit-view @enlarge-text="postFontSize += 0.1"></emit-view>
                    <div>
                        <div :style="{ fontSize: postFontSize + 'em' }">调用内建的 $emit 方法并传入事件的名字，来向父级组件触发一个事件,然后我们可以用 v-on 在博文组件上监听这个事件，就像监听一个原生 DOM 事件一样</div>
                    </div>
                </li>
                <li>
                    <strong>methods中调用</strong>
                    <emit-view1 @enlarge-text="largeText"></emit-view1>
                    <div>
                        <div :style="{ fontSize: postFontSize2 + 'em' }">调用内建的 $emit 方法并传入事件的名字，来向父级组件触发一个事件,然后我们可以用 v-on 在博文组件上监听这个事件，就像监听一个原生 DOM 事件一样</div>
                    </div>
                </li>
                <li>
                    <strong>使用v-model</strong>
                    <emit-view2 v-model="searchText"></emit-view2>
                    <code>
                        {
       {code}}
                    </code>
                    <div>
                        {
       {searchText}}
                    </div>
                </li>
            </ul>
        </section>
    </template>
    <script>
    import EmitView from "@/components/emit/EmitView.vue"
    import EmitView1 from "@/components/emit/EmitView1.vue"
    import EmitView2 from "@/components/emit/EmitView2.vue"
    export default {
        components:{
            EmitView,EmitView1,EmitView2
        },
        data(){
            return{
                postFontSize:1,
                postFontSize2:1,
                searchText:'',
                code:'当用在组件上时，v-model 则会这样：<emit-view2 v-bind:value="searchText" v-on:input="searchText = $event" ></emit-view2>'
            }
        },
        methods:{
            largeText(val){
                this.postFontSize2 += val;
            }
        }
    }
    </script>

子组件EmitView.vue

<template>
        <div>
            <button @click="$emit('enlarge-text')">Enlarge text</button>
        </div>
    </template>

子组件EmitView1.vue

<template>
        <div>
            <button @click="btn">Enlarge text</button>
        </div>
    </template>
    <script>
    export default {
        methods:{
            btn(){
                this.$emit('enlarge-text',0.1)
            }
        }
    }
    </script>

子组件EmitView2.vue

<template>
        <div>
             <input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" >
        </div>
    </template>
    <script>
    export default {
        props:["value"],
        data(){
            return{
                
            }
        }
    }
    </script>