$emit的用法

最新推荐文章于 2025-06-25 09:20:09 发布

原创最新推荐文章于 2025-06-25 09:20:09 发布 · 3.2w 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#$emit

父组件中调用子组件时绑定事件，在子组件中使用$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>