点击按钮改变颜色------Vue父子组件通信

最新推荐文章于 2023-10-08 14:30:29 发布

七彩猫猫虫

最新推荐文章于 2023-10-08 14:30:29 发布

阅读量1.4k

点赞数

分类专栏：学习中的小问题文章标签： vue 前端

本文链接：https://blog.csdn.net/SDAW_1/article/details/108122369

版权

本文介绍了如何在Vue中实现父子组件之间的通信，通过点击父组件的变红按钮改变子组件的背景颜色，以及点击子组件的变蓝按钮改变父组件的背景颜色，展示了Vue组件间的交互机制。

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

目标：点击父组件中按钮修改子组件颜色，点击子组件中按钮修改父组件颜色

效果图：

效果图

点击父组件中的变红按钮，子组件背景颜色变红:

点击父组件中的变红按钮，子组件背景颜色变红

点击子组件中的变蓝按钮，父组件背景颜色变红：

点击子组件中的变蓝按钮，父组件背景颜色变红

父组件：

//父组件
<template>
  <div id="app" :style="{background:cl002}">
    <btn01 :color01='cl01' @colorDate="cpnClick"></btn01>
    <button @click="btnClick01">变红</button

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

七彩猫猫虫

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue及Element UI&vue-element-admin简记

生活在别处

11-21

7122

文章目录概念索引安装vue基本语法声明式渲染动态参数双向绑定数据绑定中进行数据处理使用JS表达式计算属性侦听器Class 与 Style 的数据绑定Class的数据绑定Style的数据绑定条件与循环条件渲染v-if指令v-show指令列表（数组）渲染数据更新检测事件监听器修饰符事件修饰符按键修饰符按键码系统修饰键指令的缩写组件化应用构建vue实例实例生命周期的钩子模板语法高级语法相关概念HTML ...

vue组件间通信的13种方式

热门推荐

longfan_的博客

06-16

1万+

vue组件间通信的13种方式

参与评论您还未登录，请先登录后发表或查看评论

Vue让父组件改变背景色

m0_57202083的博客

11-02

843

<template id="erZi"> <div>   </div> </template> <div .

Vue父组件向子组件传递数据

Hhjnv的博客

06-13

396

1.父组件传递数据形式一 1.父组件代码为: <template> <div id="app"> <Blog :post='post'></Blog> </div> </template> <script> import Blog from './components/Blog.vue' export default { name: 'App', components:{ Blog

【Vue学习】1.利用vue,点击列表中的哪一项, 那么该项的文字变成蓝色

ArtemisKhryso的博客

10-19

790

一开始改变li的class时时直接利用数组名[index]进行修改，然后一点反应都没有，后来才知道这种利用下标修改数组元素的方式Vue是不能响应式更新的，后来改成了函数方法就成了。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .active { color

vue学习（五）父组件给子组件传递值

我是混IT圈的

03-09

1236

1、子组件：DemoHello.vue文件 <template> <div class="demo"> <h1>测试创建组件</h1> <p>{{msg}}</p> <p>年龄：{{age}}</p> <p>总数：{{count}}</p> <p>内容：{{name}}</p> </div

vue实现动态列表点击各行换色

xm1037782843的博客

06-10

9675

只是模拟一练习 v-for v-on v-bind的一个简单demo代码思路：遍历出data里面的数据 v-for给li加点击事件绑定class样式怎么控制样式的显示通过 class的控制 v:bind:class={class:index==变量} 下标和class变量是否相等控制true false代码：<div id="app"> <ul> ...

Vue--2023.6.23

weixin_65590235的博客

06-23

405

vue

44-vue基础

weixin_42688085的博客

03-14

708

感谢你的路过，希望学生的笔记能给你一点微不足道的参考感谢开课吧，本文转自开课吧的资料 Java基础思维导图。完整Java体系的链接目录标题一，前言1.1什么是vue？1.2vue 能做什么？1.3vue 特点1.4vue 三种安装方式二，vue基础2.1HelloWorld2.2实例选项2.2.1el2.2.2data2.2.3methods2.3术语解释2.3.1插值表达式(重要)2.3.2指令(重要)2.3.2-1系统指令v-text和v-html2.3.2-2系统指令v-if 和 v-show2.

Vue学习——实现点击列表改变颜色

weixin_47633384的博客

02-08

4255

Vue实现点击列表改变其中一项的颜色需求代码解决思路完整代码成果图注意事项1. 方法中 this.isActive 的赋值2. isActive 值的设定有点讲究需求简单实现点击列表其中一项，改变其颜色代码解决思路首先设定想要改变的颜色 <style> .active{ color: red; } </style> 使用 v-for 实现列表展示，v-bind 动态绑定 class，v-on:click 实现点击事件。设置

vue 实现父子组件传值和子父组件传值

似水流年，是谁苍白了等待

06-21

3029

先上一张图，vue 父子组件传值都用的图片。从张图入手了解如何传参。一、父组件 1.引入子组件 importrandomfrom"./child-random-paper"; 2.注册子组件 components:{ random, }, 3. 静态组件，循环体 <li v-for="(item,index)inselectedTypeQuestion" :key="item.id" :ind...

一个VUE组件复用，通过父子间传值修改内容，以及修改背景色

jamesclark的博客

05-26

1138

一个组件在多个地方复用（自定义组件），通过父子间传值，修改背景颜色。父元素 <template> <div class="home"> <div ><HelloWorld :arr="arr" bgccolor="green"/></div> //添加组件，arr是数组内容 <div ><HelloWorld :arr="arr" bgccolor="red"/></div> //添.

vue可以传图片及文字颜色的组件

weixin_43962877的博客

12-09

565

vue可以传图片及文字颜色的组件项目结构代码块组件引用组件部分代码

子元素hover控制父元素的hover

最新发布

suo172的博客

10-08

2056

hover 子控制父

记一次vue里面父组件给子组件style用props传值，以动态改变样式

xfmuchengxue的博客

06-14

8730

子组件nothing.vue 父组件list.vue

vue之父组件传递背景图片地址子组件接受并使用问题

oyxm____的博客

12-09

2176

父组件传递背景图片地址子组件接受并使用问题

Vue 中父级样式深度覆盖子组件

WhaleHumpback

07-09

3391

项目需要的原因，在sub组件的父级list组件中需要用到xhcj组件，同时sub组件中也用到了xhcj组件，两个地方代码逻辑是相同，仅仅是样式有些微的差别，所以决定共用组件，然后覆盖样式。 style标签上的scoped属性会致使样式只作用于当前组件，对子组件是不起作用的，但是不加scoped会使父级引入的xhcj和这里引用的xhcj样式都变化，所以也是不可以的。这是最开始写的版本，在s...

子div在父div居底【已使用】

Wait的专栏

06-18

4674

转自：http://blog.sina.com.cn/s/blog_92d6237201016jhs.html 简单的一个需求，映射着常常被忽略的知识啊。上次面试没写出来，得学习。 ·思路及要点：父div的位置设置成相对的，即“position: relative;”。而子div的位置设置成绝对的，并且下边缘设为0，即“positi

Bootstrap4导航栏

m0_46832289的博客

09-16

879

<body>  <nav class="navbar navbar-inverse navbar-expand-sm">  <div class="navbar-header"><a href=“#”class="navbarbrand">Dreamtrue!</a></div>  <div

Vue v-model深度解析与组件自定义实现

“本文深入探讨了Vue.js中的v-model原理以及如何在组件中自定义v-model，提供了一个简单的实例来帮助理解这一功能。” Vue.js中的v-model是其核心特性之一，它允许开发者实现视图和模型之间的双向数据绑定。这个...