vue触动子组件的其中一个按钮，在父组件操作数据

最新推荐文章于 2024-07-16 17:20:09 发布

加油，前进

最新推荐文章于 2024-07-16 17:20:09 发布

阅读量404

点赞数 9

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_63954739/article/details/134847438

版权

子组件vue

<el-button @click="Submit" class="buton">注册</el-button>

Submit() {
      this.$emit('fatherMethod');
}

父组件vue

<div>
	<register @fatherMethod="fatherMethod"></register>
</div>

import register from '@/components/register.vue'
export default {
   components:{
      register
	 },
   methods: {
      fatherMethod() {
       console.log('父组件方法');
        this.activelogo = 'first'
      }
  },

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

加油，前进

关注关注

9
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue触动子组件的其中一个按钮，在父组件操作数据

【代码】vue触动子组件的其中一个按钮，在父组件操作数据。
复制链接

扫一扫

vue中如何让子组件修改父组件数据

08-27

在子组件中，我们可以拷贝一份父组件传递过来的数据副本，以便在子组件中进行修改。 ``` // 在子组件中 export default { props: { checkModalGroup: { type: Array, default: [], required: false, } }, ...

Vue中父组件向子组件通信的方法

08-30

在本文中，我们将通过一个实例来介绍 Vue 中父组件向子组件通信的方法。 props 的作用域是孤立的，子组件的模板中无法直接调用父组件的数据。可以使用 props 将父组件的数据传递给子组件。子组件在接受数据时需要...

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

【VUE】组件通信方式大总结

ColdCoder的博客

03-09

809

文章目录组件通信总览一 props-$emit1. 用法2. 优点3. 缺点4. 应用场景二 `this.$children`&`this.$parent`1 用法2 优点3 缺点4 应用场景三 provide & inject1 用法2 优点3 缺点4 应用场景四 vuex1 用法2 优点3 缺点4 应用场景五事件总线事件总线——EventBus1 用法2 优点3 缺点4 应用场景事件总线——new Vue1 用法2 优点3 缺点4 应用场景六、`$attrs` & `$list

Vue子控件点击事件触发父控件点击事件

cmmboy1990的博客

07-15

1323

Vue子控件点击事件触发父控件点击事件解决:在子控件的事件后面加 .stop @click.stop="getImg(item.envelopePic)"

vue组件通信方式总结及其应用场景

zl_Alien的博客

12-08

1144

前言相信实际项目中用过vue的同学，一定对vue中父子组件之间的通信并不陌生，vue中采用良好的数据通讯方式，避免组件通信带来的困扰。今天笔者和大家一起分享vue父子组件之间的通信方式，优缺点，及其实际工作中的应用场景首先我们带着这些问题去思考 1 vue中到底有多少种父子组件通信方式？ 2 vue中那种父子组件最佳通信方式是什么？ 3 vue中每个通信方式应用场景是什么？一 prop 1 基本用法 prop通信方式大家最常见的，也是最常用的父子组件通信类型，我们可以直接在标签里面给子组件绑定属性和方

Element组件（基础组件和配置组件）

weixin_68915174的博客

11-20

2706

buttonbutton添加样式：2.渲染没有边框（text）和背景色（bg）的按钮添加样式同上格式：2. //在图标后面添加内容3. //在图标前面添加内容需要添加style添加color=" " :dark="isDark"js中添加Border边框Container布局容器：外层容器：顶栏容器。：侧边栏容器。：主要区域容器。

Vue基础——生命周期&基础指令&组件技术

有人找你的博客

05-29

445

Vue 一. 创建vue项目 tianqideMBP:try-vue tianqizhao$ vue init webpack hello ? Project name hello ? Project description A Vue.js project ? Author tianqi-zhao <tianqizhao.judy@gmail.com> ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint

vue在v-for中实现自定义点击事件

YSHHJR的博客

08-16

3127

问题当v-for每循环一次需要触发一次点击事件的时候解决 1.v-hClick中hClick为自定指令，此处根据数组下标index为指令发生点击事件 2.@click.native，此处需要添加.native监听组件根元素的原生事件，如果不加事件不会生效 <a-checkbox v-for='(item,index) in checkedList' :value='item.actFormId' :key='index' v-hClick='index' @click.native='

Vue|VNode、elm、context、el是个啥？

文化园

07-18

5002

vue越来越熟练，但是一些基础的概念却渐渐模糊。模糊中又会变得自我怀疑，然后重新梳理，重新认识、深入了解 ~ VNode、elm、context、el ~他们是个啥，担任着什么样子的角色？

v-for循环创建事件，一个触发多个响应解决

qq_43378240的博客

07-26

2272

在vue的一个ul里，用v-for循环创建li并设置事件，但是会造成所有的li的事件都会同时被触发，下图是解决办法，给mouseenter事件里showQrcode事件传入一个参数index，是v-for循环里创建的index，来触发Qrcode标签的v-show，第三方变量showQr === index 等于为true，不等于，没有不等于，你每个点击传入的index一定是当前li的index <li class="tabLi" v-for="(liItem, index) in liIte

vue中优化-----for循环事件代理方式触发函数

qq_43631129的博客

03-13

595

vue中优化-----for循环事件代理方式触发函数

vue父组件异步获取数据传给子组件的方法

10-18

在Vue框架中，父组件与子组件之间的数据传递是一个常见的需求。当父组件的数据是通过异步请求获取时，如何正确地将这些数据传递给子组件，并确保子组件能够及时、安全地使用这些数据，是开发者需要面对的问题。本文...

vue里面父组件修改子组件样式的方法

08-28

在 Vue 开发中，经常会遇到父组件修改子组件样式的问题。由于 scoped 属性的存在，父组件的样式无法渗透到子组件中。那么，如何让父组件修改子组件的样式呢？下面将分享三种方法：去掉 scoped、混用本地和全局样式、...

Vue element-ui父组件控制子组件的表单校验操作

10-15

在子组件内部，我们创建了一个`el-form`并绑定了`addForm`，同时设置了表单验证规则（`formRules`）。每个`el-form-item`都有一个`prop`属性，它应该与`v-model`中的字段名一致，这样才能确保Element-UI能够正确地...

vue3【详解】单文件组件 SFC（含SFC的优点、缺点、使用场景、原理、使用预处理器、＜script setup＞语法详解、资源拆分）

最新发布

朝阳39的博客

07-16

596

自定义指令必须遵循命名规范（自定义指令名的首字母必须是v，后续跟首字母大写的自定义指令名称）// 在元素上做些操作 } } < template > < h1 v-my-directive > This is a Heading const。

【Vue】 style中的scoped

DX390609的博客

07-15

168

在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，通过该属性，可以使得组件之间的样式不互相污染。

docker将Java、vue、nginx打进镜像（涉及容器打成镜像）

qq_37752382的博客

07-15

557

按照上文拉取centos7，然后将需要的东西直接打进脚本，这样最简单，但是在拉取过程中，初始镜像contos7安装nginx需要安装一些工具包，拉取的时候报错了，原因还是在镜像源上，并且还想在上面装一些工具，另外创建容器不应该在里面做很多初始化的东西，每次更新业务包就行，4）准备文件完成后执行下面的就行（如果配置文件不对，比如nginx的配置等先进入镜像手动调整好，没问题了，再删除掉容器和镜像重新制作镜像即可）本文不讲安装docker,安装好安装，镜像源稍微麻烦点。1）生成镜像并创建容器。

vuejs v-for和v-if同时使用报变量未定义

业余程序猿

07-14

320

vue3中v-if优先级高，v-if使用v-for循环体数据时数据还未加载，就报未定义了。vue2中v-for优先级高，同时使用v-if可以直接使用v-for的循环体数据。无论时vue2还是3，官方都不建议两者一起使用，建议通过template嵌套。vue3和vue2 v-if和v-for同时使用时渲染优先级变了。查了下官方文档才找到问题所在。风格指南 — Vue.js。

vue2 父组件按钮操作子组件方法

09-12

在Vue2中，可以通过props和事件来实现父组件按钮操作子组件的方法。首先，你可以在父组件中定义一个按钮，并在点击按钮的时候触发一个事件。例如： ``` <template> <div> <button @click="handleButtonClick">点击按钮</button> <ChildComponent :showChild="showChild"></ChildComponent> </div> </template> <script> import ChildComponent from 'ChildComponent.vue'; export default { data() { return { showChild: false, }; }, methods: { handleButtonClick() { this.showChild = !this.showChild; }, }, components: { ChildComponent, }, }; </script> ``` 在这个例子中，我们定义了一个名为`showChild`的数据属性，并在点击按钮的时候切换该属性的值。然后，将这个属性作为`props`传递给子组件`ChildComponent`。接下来，在子组件中，你可以通过监听父组件传递过来的`props`的变化，在子组件中显示或隐藏自己。例如： ```vue <template> <div v-if="showChild"> 子组件内容 </div> </template> <script> export default { props: { showChild: { type: Boolean, default: false, }, }, }; </script> ``` 在子组件中，我们使用`v-if`指令来根据父组件传递过来的`showChild`值来决定是否显示子组件的内容。这样，当你点击父组件的按钮时，子组件就会根据`showChild`的值来显示或隐藏自己。总结起来，通过在父组件中定义一个按钮和一个数据属性，并在点击按钮的时候改变该属性的值，然后将该属性作为`props`传递给子组件，子组件根据接收到的`props`的值来显示或隐藏自己，就实现了父组件按钮操作子组件的方法。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交