vue 组件属性监听_vue监听子组件事件

在我们开发  组件时,它的一些功能可能要求我们和父级组件进行沟通。例如我们可能会引入一个辅助功能来放大博文的字号,同时让页面的其它部分保持默认的字号。

在其父组件中,我们可以通过添加一个 postFontSize 数据属性来支持这个功能:

new Vue({

el: '#blog-posts-events-demo',

data: {

posts: [/* ... */],

postFontSize: 1

}

})

它可以在模板中用来控制所有博文的字号:

v-for="post in posts"

v-bind:key="post.id"

v-bind:post="post"

>

现在我们在每篇博文正文之前添加一个按钮来放大字号:

Vue.component('blog-post', {

props: ['post'],

template: `

{{ post.title }}

Enlarge text

`

})

问题是这个按钮不会做任何事:

Enlarge text

当点击这个按钮时,我们需要告诉父级组件放大所有博文的文本。幸好 Vue 实例提供了一个自定义事件的系统来解决这个问题。父级组件可以像处理 native DOM 事件一样通过 v-on 监听子组件实例的任意事件:

...

v-on:enlarge-text="postFontSize += 0.1"

>

同时子组件可以通过调用内建的 $emit 方法 并传入事件名称来触发一个事件:

Enlarge text

有了这个 v-on:enlarge-text="postFontSize += 0.1" 监听器,父级组件就会接收该事件并更新 postFontSize 的值。

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页