子组件向父组件传递参数demo1（官网demo）

最新推荐文章于 2023-12-08 16:56:44 发布

Shift2092

最新推荐文章于 2023-12-08 16:56:44 发布

阅读量192

点赞数

本文链接：https://blog.csdn.net/Shift2092/article/details/82961058

版权

这是一个关于Vue组件通信的实例，展示如何通过自定义事件从子组件向父组件传递参数。博客内容中创建了一个名为`blog-post`的子组件，它接收`post`属性并发射`enlarge-text`事件来改变父组件中的字体大小。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</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 src="js/vue.js"></script>

<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
      <