Vue 监听子组件事件

demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>First Vue Demo</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>    
</head>
<body>
    
    <div id="blog-posts-events-demo">
      <div :style="{ fontSize: postFontSize + 'em' }">
        <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post" v-on:enlarge-text="postFontSize += 0.1"></blog-post>
      </div>
    </div>
    
    <script>
        Vue.component('blog-post', {
          props: ['post'],
          template: `
            <div class="blog-post">
              <h3>{{ post.title }}</h3>
              <button v-on:click="$emit('enlarge-text')">
                Enlarge text
              </button>
            </div>
          `
        })
        
        new Vue({
          el: '#blog-posts-events-demo',
          data: {
            posts: [
                  { id: 1, title: 'My journey with Vue' },
                  { id: 2, title: 'Blogging with Vue' },
                  { id: 3, title: 'Why Vue is so fun' }
            ],
            postFontSize: 1
          }
        });
        
        
    </script>
    
</body>
</html>
View Code

 

posted @ 2021-09-02 17:41  zhuangrunwei  阅读(54)  评论(0)  编辑  收藏  举报