Vue让父组件改变背景色

最新推荐文章于 2024-07-13 17:35:29 发布

原创最新推荐文章于 2024-07-13 17:35:29 发布 · 943 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在Vue.js应用中，通过父子组件通信的方式，使父组件能够动态改变子组件的背景颜色。我们将探讨Vue的props、自定义事件以及如何在组件间传递数据来实现这一功能。

<template id="erZi">
        <div>
            <!-- 使用  $emit -->
            <!-- <button @click="$emit('change-bgcolor')">想让  父组件中的 背景色</button> -->
            
        </div>
    </template>
    <div id="fuqin">
        <span :style="{backgroundColor:color}">现在看到的世界越来越大，可是心里的世界却越来越小</span>
        <er-zi @change-bgcolor='change($event)'></er-zi>
        
    </div>


    <script>
        Vue.component('er-zi',{
            template:'#erZi',
            //不是要点击事件 改变背景颜色
            created:function(){
                this.$emit('change-bgcolor','pink' )
            }
        });
        const fuqin = new Vue({
            el:'#fuqin',
            data(){
                return{
                    color:''
                }
            },
            methods: {
                change:function(val){
                    console.log(this.color)
                    //this.color='green';
                    this.color=val
                }
            },
            created () {
                
            }
        });
    </script>