Vue组件通讯之子传父

最新推荐文章于 2024-05-26 08:00:00 发布

敲出真谛

最新推荐文章于 2024-05-26 08:00:00 发布

阅读量214

点赞数

分类专栏： Vue 文章标签：组件通讯子传父

本文链接：https://blog.csdn.net/qq_36818627/article/details/88579279

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

子传父的通讯方式的实现是通过订阅者模式来实现的

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Aui车养护</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <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="change"></blog-post>
        </div>
    </div>
    <script>
        Vue.component('blog-post', {
            props: {
                post: {
                    type: Object,
                    required: true,
                },
            },
            template:
                `
                <div class="blog-post">
                    <h3  v-on:click="changeColor" :style="{color:activeColor;}"> {{ post.title }}</h3 >
                    <button v-on:click="$emit('enlarge-text',0.1)">
                        Enlarge text
                    </button>
                    <div v-html="post.content"></div>
                </div > 
           `,
            methods: {
                changeColor() {
                    let colors = ['red', 'blue', 'green', 'lightgreen'],
                        i = 0;
                    console.log("子组件的点击事件");
                    if (i > colors.length) i = 0;
                    let colorflag = colors[i];
                }
            },
            data: {
                activeColor: 'red',
            }
        })
        let vm = new Vue({
            el: "#app",
            data: {
                a: 1,
                posts: [
                    { id: 1, title: 'My journey with Vue' },
                    { id: 2, title: 'Blogging with Vue' },
                    { id: 3, title: 'Why Vue is so fun' }
                ],
                postFontSize: 1,
                blog: "击鼓传花的游戏",
            },
            created() {
                console.log('this = ', this);
            },
            methods: {
                change(enlargeAmount) {
                    this.postFontSize += enlargeAmount;
                }
            }
        });
    </script>
</body>

</html>

敲出真谛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件通讯之子传父

子传父的通讯方式的实现是通过订阅者模式来实现的&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-s
复制链接

扫一扫