vue 点击子组件按钮，把父组件字体放大（子组件给父组件传值）

最新推荐文章于 2024-12-05 16:56:01 发布

lengleng0107

最新推荐文章于 2024-12-05 16:56:01 发布

阅读量2.3k

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/lengleng0107/article/details/122332657

本文展示了如何在Vue.js中通过事件和属性实现父子组件间的通信。子组件通过$emit触发事件并传递数据，父组件监听该事件并更新自身状态，从而实现父组件字体大小的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上效果图

我把我的代码都加了注释，其他就不说了，直接放代码了

<body>
    <template id="erzi">
        <div>
           <!--  @click 点击事件 -->
            <button @click="big">我是子组件，点我父类组件字体变大</button>
        </div>
    </template>


    <div id="baba">
        <div >
            <!-- 这个是绑定字体大小属性，如果有其他数据的，也可以为一个对象，如:style="styleObject" -->
            <a :style="{ fontSize: sizes + 'px' }">字体大小</a>
        </div>
        <!-- big-text: 是父组件指定的传数据绑定的函数,update是父组件的点击事件方法 -->
        <erzi @big-text='update'></erzi>
    </div>


    <script>
        //这个是子组件
        var erzi={
            data() {
                return {
                    size:15
                }
            },
            template:"#erzi",//子组件的id
            methods: {
                //点击事件
                big:function(){
                    //每点一次按钮，字体大小+5
                    this.size=this.size+5;
                    //big-text: 是父组件指定的传数据绑定的函数，this.size:子组件给父组件传递的数据
                    this.$emit('big-text',this.size)
                }
            },
        }


        //这个是父组件
        const baba = new Vue({
            el:"#baba",//父组件的id
            data() {
                return {
                    sizes:15,//字体默认大小为15
                }
            },
            methods: {
                update:function(size){
                    //更新字体大小
                    this.sizes=size
                }
            },
            components:{
                'erzi':erzi
            },
        })
    </script>
</body>

如果有用就点个赞吧