在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vue子組件通過事件向父級組件發(fā)送消息怎么不成功啊

vue子組件通過事件向父級組件發(fā)送消息怎么不成功啊

初學vue，照著官網(wǎng)實例敲的，怎么點擊按鈕字體沒有變大啊

Html代碼：

<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"
        ></blog-post>
    </div>
</div>

</body>

js代碼

 Vue.component('blog-post', {
        props: ['post'],
        template: `
    <div class="blog-post" v-on:enlarge-text="postFontSize+=0.1">
      <h3>{{ post.title }}</h3>
      <button v-on:click="$emit('enlarge-text')">
        Enlarge text
      </button>
      <div v-html="post.content"></div>
    </div>`
    })
    
    let a = new Vue({
        el: '#blog-posts-events-demo',
        data: {
            posts: [
                {id: 1, content: 'My journey with Vue', title: '1'},
                {id: 2, content: 'Blogging with Vue', title: '2'},
                {id: 3, content: 'Why Vue is so fun', title: '3'}
            ],
            postFontSize: 1
        }
    })
回答
編輯回答
咕嚕嚕

v-on:enlarge-text應(yīng)該寫在父組件調(diào)用子組件的地方

<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>
2017年7月18日 23:40
編輯回答
背叛者

將 v-on:enlarge-text="postFontSize+=0.1" 移到 <blog-post>組件上

<blog-post
+  v-on:enlarge-text="postFontSize+=0.1
></blog-post>
2017年7月10日 17:27