使用vue实现点击段落放大功能

1.段落子组件(BlogPost.vue)

使用props从父组件获得段落的内容;使用emits设置子组件的点击事件在父组件中响应而改变自身大小。

<script>
export default {
  props: ['pra'],
  emits: ['enlarge-text']
}
</script>

<template>
  <div class="blog-post">
	  <p @click="$emit('enlarge-text')">{{ pra }}</p>
  </div>
</template>

2.父组件(App.vue)

使用一个数组存储各段落的字体大小。

<script>
import BlogPost from './BlogPost.vue'
  
export default {
  components: {
    BlogPost
  },
  data() {
    return {
      posts: [
        { id: 0, pra: 'When you have eliminated the impossibles,whatever remains,however improbable,must be the truth. ' },
        { id: 1, pra: 'Depend upon it, there is nothing so unnatural as the commonplace.' },
        { id: 2, pra: 'What you do in this world is a matter of no consequence. The question is, what can you make people believe that you have done?' }
      ],
      postFontSize:[1,1,1]
    }
  }
}
</script>

<template>

    <BlogPost
      v-for="post in posts"
      :key="post.id"
      :pra="post.pra"
      :style="{ fontSize: postFontSize[post.id] + 'em'}"
      @enlarge-text="postFontSize[post.id] += 0.1"
    ></BlogPost>

</template>