父组件中调用子组件时绑定事件，在子组件中使用$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/"
import EmitView1 from "@/components/emit/"
import EmitView2 from "@/components/emit/"
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>
子组件
<template>
<div>
<button @click="$emit('enlarge-text')">Enlarge text</button>
</div>
</template>
子组件
<template>
<div>
<button @click="btn">Enlarge text</button>
</div>
</template>
<script>
export default {
methods:{
btn(){
this.$emit('enlarge-text',0.1)
}
}
}
</script>
子组件
<template>
<div>
<input v-bind:value="value" v-on:input="$emit('input', $)" >
</div>
</template>
<script>
export default {
props:["value"],
data(){
return{
}
}
}
</script>