vue中在父组件点击按钮触发子组件的事件，HTML标签语义化

最新推荐文章于 2024-05-20 10:06:38 发布
最新推荐文章于 2024-05-20 10:06:38 发布
阅读量417 收藏 9
点赞数 3
分类专栏： 2024年程序员学习 文章标签： vue.js html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60721907/article/details/137253660
版权

notify: function () {

if (this.msg.trim()) {

this.$refs.child.parentMsg(this.msg);

}

},

},

};

子组件

    • 父组件输入了：{ { item }}

    • 自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

      深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

      因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
      img
      img
      img

    最低0.47元/天 解锁文章
    不讲伍德老开发
    关注
    • 3
      点赞
    • 踩
    • 9
      收藏
      觉得还不错? 一键收藏
    • 0
      评论
    专栏目录
    Vue自定义事件(详解)
    08-29
    例如，在一个简单的例子中，我们创建了一个名为`childNode`的子组件，它有一个按钮，点击后会增加内部计数器，并通过`$emit`触发`increment`事件。父组件`parentNode`包含两个子组件，并在模板中使用`@increment`...
    基于Vue的简易练习图书的管理.rar
    10-25
    在这里，我们可以将图书管理的各个部分（如搜索框、列表、添加/删除按钮等）封装为独立的可复用组件，通过`<component>`标签在页面上使用。组件有自己的状态和方法，可以接收props（属性）并发出事件。 4. **计算...
    DOM的学习----事件
    m0_55673399的博客
    08-24 851
    了解事件JavaScript与HTML之间的交互是通过事件实现的。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间1.事件源：事件被触发的对象 比如-->按钮对象2.事件类型：如何触发？触发什么事件？例如鼠标点击，键盘按下等…3.事件处理程序：通过一个函数赋值的方式。
    点击父组件的事件，触发子组件的某个效果 / 传参
    m0_69502730的博客
    11-11 862
    点击父组件的事件，触发子组件的某个效果 / 传参
    js 同一父元素下不同子元素点击事件
    最新发布
    GoodLuck_yyh的博客
    05-20 114
    操作：在不同子元素上加点击事件，使用同一个方法，根据不同类型进行区分。需求：同一父元素下不同子元素需要反复点击触发。
    html点击父元素执行子元素,js单击子元素给父元素添加单击事件onclick会形成连击...
    weixin_42514711的博客
    07-02 1936
    网站应用需求多种多样，有的时候单击某个元素(如 删除)需要用js给其父元素添加单击事件；但直接给其父元素添加onclick事件会形成连击，即设置的父元素onclick单击事件会立即执行，不符合由用户单击后再执行的要求。为了避免形成连击，特意尝试用setTimeout延迟程序的执行，但仍然会形成连击；按理说给其父元素添加的单击事件不会立即执行，估计是子元素与父元素重合所至。一、js单击子元素给父元素...
    Vue：父组件触发子组件中的方法
    孙悟空
    07-19 5682
    vue父组件触发子组件中函数的两种方式。
    vue父组件点击触发子组件事件
    前端打工人的博客
    04-15 8027
    父组件app.vue <template> <div id="app"> <!--父组件--> <input v-model="msg"> <button v-on:click="notify">广播事件</button> <!--子组件--> <popup ref="child" &...
    vue.js-devtools_5.1.1解压后 在浏览器扩展程序直接加载已解压 即可使用
    04-20
    Vue.js 是一款流行的前端JavaScript框架，它以组件化开发、易用性和高性能著称。...- **build** 文件夹可能是编译后的代码，包括Vue组件、JavaScript库和其他构建结果，它们被整合在一起以便于加载和执行。
    vue_vue.js_
    10-03
    每个组件都可以接受props（属性）作为输入，并通过emit（触发事件）与父组件通信。通过这种方式，你可以构建出模块化的应用结构，提高代码的可维护性和复用性。例如，创建一个名为`Button`的组件，可以接收`label`和...
    paste-copy:一个基于vue的ui
    05-06
    2. **Vue组件化开发** - **组件系统**：Vue的核心特性之一，组件是可复用的Vue实例，可以封装HTML、CSS和JavaScript代码。 - **单文件组件（Single File Component，SFC）**：将模板、脚本和样式放在同一个.vue...
    点击子元素事件不触发父元素事件
    05-12
    点击子元素，触发子元素事件的同时不触发父元素的时间
    vue子元素点击事件与父元素点击事件冲突 子元素点击事件不触发
    weixin_44509776的博客
    04-11 5510
    在vue项目中，子元素有点击事件，父元素也有点击事件，当点击子元素时往往触发的是父元素的点击事件，产生冲突，怎样解决这个问题呢？
    点击子元素却也触发父元素的点击事件
    我的博客
    02-24 2万+
    在前端开发时，经常出现父元素有点击事件，子元素也有点击事件，在点击子元素时却会把父元素的点击事件也触发，这种情况叫做事件冒泡，解决的方案有很多种，这里记录一下比较常用，比较好用的一种解决方案 HTML 代码   父元素 &lt;div id="father" style="width:600px;height:400px;border:1px solid black;"&gt;&lt;...
    vue父组件触发子组件事件
    SingDanceRapBall的博客
    10-23 4975
    vue父组件触发子组件方法
    vue---vue2.x中父组件如何触发子组件事件方法？
    Wbiokr的博客
    09-29 1万+
    1. 父组件中获取子组件方法 $children <template> <div> <v-header></v-header> <v-content></v-content> <v-footer></v-footer> </div> </template> <script> import vHeader from './Head
    vue.js2.0父组件点击触发子组件方法
    热门推荐
    大灰狼的小绵羊哥哥的博客
    03-10 4万+
    {{ total }} Vue.component('button-counter', { template: '{{ counter }}', data: function () { return { counter: 0
    js实现触发子元素事件，而不触发父元素事件
    一条鱼
    04-17 1万+
    在这之前，我们先了解一下DOM的事件对象：preventDefault() 取消事件的默认行为stopPropagation() 取消事件冒泡对当前节点无影响cancelBubble() 取消事件冒泡DOM事件处理有三个阶段：捕捉阶段（capture phase）：从最上层元素，直到最下层（你点击的那个target）元素。路过的所有节点都可以捕捉到该事件。命中阶段（target phase）：如果...
    vue3父组件点击按钮触发子组件的事件
    11-22
    在Vue3中，可以通过使用`ref`和`emit`来实现父组件点击按钮触发子组件的事件。具体步骤如下： 1. 在父组件中，使用`ref`为子组件注册一个引用。 2. 在父组件中，为按钮绑定一个点击事件，并在该事件中使用`emit`触发子组件的事件。 3. 在子组件中，使用`props`接收父组件传递的参数，并在`setup`函数中使用`on`监听父组件传递的事件。 4. 在子组件中，定义一个处理父组件传递事件的方法，并在该方法中处理父组件传递的参数。 下面是一个示例代码： ```html <!-- 父组件 --> <template> <div> <button @click="handleClick">点击触发子组件事件</button> <ChildComponent ref="child" /> </div> </template> <script> import { ref } from 'vue' import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }, setup() { const childRef = ref(null) const handleClick = () => { childRef.value.$emit('parent-event', '这是父组件传递的参数') } return { childRef, handleClick } } } </script> ``` ```html <!-- 子组件 --> <template> <div> <p>子组件接收到的参数：{{ message }}</p> </div> </template> <script> import { on, ref } from 'vue' export default { props: { msg: { type: String, default: '' } }, setup(props) { const message = ref('') onMounted(() => { on(props, 'parent-event', (msg) => { parentMsg(msg) }) }) const parentMsg = (msg) => { message.value = msg } return { message, parentMsg } } } </script> ```
    评论
    添加红包

    请填写红包祝福语或标题

    个

    红包个数最小为10个

    元

    红包金额最低5元

    当前余额3.43元 前往充值 >
    需支付：10.00元
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付元
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明：

    1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

    余额充值