3. Vue 监听子组件(事件抛出值)
2020-07-13 05:55
37 查看
Vue 监听子组件(事件抛出值)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue 监听子组件</title> </head> <body> <div id="app"> <div :style="{ fontSize: font_size+'px'}"> <blog-post v-for="(post, index) in posts" :key='index' :post="post" @set_font_size="setFontSize" ></blog-post> </div> </div> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> Vue.component('blog-post', { props: ['post'], template: ` <div class="blog-post"> <h3>{{ post.title }}</h3> <div v-html="post.content"></div> <button @click="$emit('set_font_size', 12)">set font size 12px</button> <button @click="$emit('set_font_size', 18)">set font size 18px</button> <button @click="$emit('set_font_size', 24)">set font size 24px</button> </div> ` }) app = new Vue({ el: '#app', data: { font_size: 16, posts: [ { id: 1, title: 'My journey with Vue', content:'1..' }, { id: 2, title: 'Blogging with Vue', content:'2..' }, { id: 3, title: 'Why Vue is so fun', content:'3..' } ] }, methods: { setFontSize(size){ this.font_size = size } }, }) </script> </body> </html>
相关文章推荐
- vue使用$emit时,父组件无法监听到子组件的事件
- 使用vue.js在页面内组件监听scroll事件
- vue封装组件的事件监听
- 使用vue.js在页面内组件监听scroll事件的方法
- Vue.js 2使用中的难点举例--子组件,slot, 动态组件,事件监听
- vue2.x 父组件监听子组件事件并传回信息的方法
- vue使用$emit时,父组件无法监听到子组件的事件实例
- 使用 vue 实例更好的监听事件及vue实例的方法
- vue中的watch监听事件机制
- vue中的watch监听事件机制
- Vue如何监听键盘事件中的按键
- vue兄弟组件传值 中央事件总线及使用时遇到的问题
- Vue 监听列表item渲染事件
- vuejs2.0实现分页组件,使用$emit进行事件监听数据传递
- 浅谈vue中组件绑定事件时是否加.native
- Vue之v-on绑定监听子组件传来的事件
- Vue框架-基础知识(vue指令、实例生命周期、计算属性与监听属性、插槽理解、组件介绍、数据交互、ES6语法等)
- vue自定义组件添加点击事件
- Vue中非父子组件通过事件总线改变数据但data中数据不变的问题
- [Vue] 给组件绑定原生事件