手把手教你VUE从入门到放弃—— 篇十七（非父子组件间传值）

最新推荐文章于 2023-03-20 22:46:57 发布
最新推荐文章于 2023-03-20 22:46:57 发布
阅读量120 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JavaCoder_juejue/article/details/103690546
版权

发布订阅模式实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件参数校验与非props特性</title>
      <script src="vue.js"></script>
</head>
<body>
    <div id = 'app2'>
        <row name="Tom" ></row>
        <row name="Mike"></row>
    </div>
    <script>
        Vue.prototype.bus = new Vue();
        Vue.component('row',{
            data:function(){
                return {
                    selfName:this.name
                }
            },
            props:{
                name:String
            },
            template:'<h2 @click="handleClick">{{selfName}}</h2>',
            methods:{
                handleClick:function(){
                    this.bus.$emit('change',this.selfName);
                }
            },
            mounted:function(){
                var this_ = this;
                this.bus.$on('change',function(msg){
                    alert(msg);
                    this_.selfName = msg; 
                })
            }
        });
        var app = new Vue({
            el:'#app2'
        });
    </script>
</body>
</html>

 

我才是真的封不觉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
浅谈Vue父子组件和非父子组件传值问题
08-29
Vue 组件传值问题是 Vue 开发中非常重要的一个话题，涉及到父子组件和非父子组件之间的传值问题。今天，我们将一步步地介绍如何在 Vue 中实现组件传值。 组件的创建 创建组件是 Vue 开发的基础步骤。下面是一个...
Vue非父子组件之间传值
01-08
这就是非父子组件间通信的一种有效方式。 总结来说，Vue的Bus机制是一种实用的工具，它允许我们在不依赖于父子关系或Vuex等状态管理库的情况下，实现组件间的通信。通过创建一个全局的事件总线，我们可以将事件和...
手把手教你VUE从入门到放弃—— 篇五（组件传值）
JavaCoder_juejue的博客
11-26 103
不多说，直接上代码 下面的知识点包含 1.emit("事件名") 主动触发一个事件 2.@delete 等价于v-on:click 3.v-bind: 等价于 ： 4.v-bind 绑定属性 5.v-for="(item,index) in list 获取列表中的每个值及其下标（从0开始） <!DOCTYPE html> <html lang="en"> ...
手把手教你VUE从入门到放弃—— 篇十四（父子组件数据的传递）
JavaCoder_juejue的博客
12-24 120
父组件向子组件传递数据 如下，先在子组件中定义属性，然后父组件中必须在props数组中声明，然后即可以在子组件中进行使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中组件的细节</title> ...
前端Js框架Vue
XBlithe的博客
06-08 2810
Vue是和jQuery一样是一个前端框架，它的中心思想就是用数据驱动UI。在使用jQuery的时代，如果要改变某一个DOM元素的值，jQuery首先要获取到dom对象，然后对dom对象进行进行值的修改等操作; 而Vue.js 则是专注于 MVVM 模型的 ViewModel 层，Vue首先会把值和ViewModel对象进行绑定，然后修改ViewModel对象的值，Vue这个框架就会自动做好Dom的相关操作，这种dom元素跟随ViewModel对象值的变化而变化叫做单向数据绑定，如果ViewModel对象的值
vue+node+mysql全栈项目完整记录
热门推荐
黄钢的博客
01-17 2万+
因工作需要，近半年一直在写B/S架构的项目。博主作为门外汉coder，其实刚开始会的语言只有Python和matlab。matlab作为博主研究生期间写论文的主要工具，参加工作以后就很少用了。后面因为要做数据分析相关的工作，所以自己学了一下Python，包括qt界面开发相关的技术。个人觉得Python作为后端开发语言，其实已经很强大了。现在在后端开发领域之所以java依旧是王者，主要是因为很多项目都是java开发的，用java维护起来更加方便。被大家诟病的弱类型语言，其实Python3已经可以强制类型了。
年前走一波【vue博文】集合，收藏就对了，2020年您好
ElegantHedgehog的博客
01-16 608
新的一年，新的起步 查看github最新的Vue weekly；请::点击::【?Vue.js资讯?】目前web前端开发非常火爆的框架；定时更新，欢迎 Star 一下。 忆长安·十二月 [唐]谢良辅 忆长安，腊月时，温泉彩仗新移。 瑞气遥迎凤辇，日光先暖龙池。 取酒虾蟆陵下，家家守岁传卮。 Hello, 2020; please be nice to me！ 再见2019 你好2...
【几乎最全/全网最长的 2 万 字】前端工程化完整流程：从头搭到尾（vue3 + vite + qiankun + docker + tailwindcss + iview......）
碳学长的博客
03-20 8466
两万多字带你实践前端工程化
面试了一个程序员，只因这一个细节，被我一眼看穿是培训班出来的，没啥工作经验...
Code Writers
12-04 1019
首先，我说一句：培训出来的，优秀学员大有人在，我不希望因为带着培训的标签而无法达到用人单位和候选人的双向匹配，是非常遗憾的事情。最近，在网上看到这样一个留言，引发了程序员这个圈子不少的轰动。“帮公司面试了一个32岁的程序员，只因这一个细节，被我一眼看穿是培训班出来的，没啥工作经验…”培训出来的程序员总被误伤 不知道从什么时候开始，大家是越来越看不上培训出来的程序员了，主要是嫌弃他们：基础不行、学历低、水平不行、学习能力弱、简历造假。有些培训机构出来的程序员确实有问题，但是不能因为“只是很多表现不好的程序员恰
面试了一个34岁的程序员，只因这一个细节，被我一眼看穿是培训班出来的，没啥工作经验...
okcross0的博客
12-28 733
软件测试是IT相关行业中最容易入门的学科~不需要开发人员烧脑的逻辑思维、不需要运维人员24小时的随时待命，需要的是细心认真的态度和IT相关知识点广度的了解，每个测试人员从入行到成为专业大牛的成长路线可划分为：软件测试、自动化测试、测试开发工程师 3个阶段。这些资料，对于【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴上万个测试工程师们走过最艰难的路程，希望也能帮助到你!有需要的小伙伴可以点击下方小卡片领取。
面试了一个32岁的程序员，只因这一个细节，被我一眼看穿是培训班出来的，没啥工作经验....
okcross0的博客
11-16 842
首先，我说一句：培训出来的，优秀学员大有人在，我不希望因为带着培训的标签而无法达到用人单位和候选人的双向匹配，是非常遗憾的事情。
详解vue父子组件间传值(props)
08-30
本篇文章主要介绍了详解vue父子组件间传值(props)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue非父子组件间的传值
01-08
在组件体系结构中，有时我们需要在非父子组件间传递数据，这通常涉及到事件总线（Event Bus）或者Vuex状态管理库。这里我们将详细讨论如何使用事件总线实现非父子组件间的通信。 ### 1. 创建事件总线（Event Bus） ...
vue.js 传值方法（父子组件传值、非父子组件传值）
01-08
在Vue中，有多种方式实现组件之间的数据传递，主要包括父子组件间通信和非父子组件间通信。 **一、父子组件传值** 1. **父组件向子组件传递值** - 基本原理：使用`props`属性从父组件向子组件传递数据。 - 步骤...
基于python开发的居民区电动汽车TOPSIS有序充电仿真+源码解析+项目文档+仿真（毕业设计&课程设计&项目开发）
最新发布
08-06
基于python开发的居民区电动汽车TOPSIS有序充电仿真+源码解析+项目文档+仿真，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用，详情见md文档~ 项目简介： "Simulation.md" 为代码解析说明文档 "仿真过程.py" 为仿真过程代码 "cargo.txt" 为随机生成的电动汽车出行数据，格式为[离开时间，回来时间，是否出行，剩余电量百分比]，其中是否出行 1表示出行，0表示不出行 "cargo.py" 为生成电动汽车出行数据代码 "carimf.txt" 为电动汽车信息初始化数据，格式为[序号，电池容量，慢充时间，最大行驶里程，慢充每15分钟增加电量百分比] "price.txt" 为时间价格表，格式为[时间，时段，电价]，其中，时段1表示峰时，时段2表示谷时，时段3表示平时 "drawpic.py" 为绘图函数 "小区居民日常负荷数据.txt" 为通过蒙特卡洛方法生成的小区居民日常负荷数据，格式为[时间，负荷]
【流程管理】LTC流程介绍.pptx
08-06
【流程管理】LTC流程介绍.pptx
libmavsdk-server.so-debug-202408062018-wk-proto-ok
08-06
libmavsdk_server.so_debug_202408062018_wk_proto_ok
信息安全lsClssify-mas笔记
08-06
信息安全lsClssify-mas笔记
vue 父子组件之间传值
09-07
在Vue中，父组件与子组件之间传值有多种方式： 1. Props: 父组件通过props向子组件传递数据。在父组件中使用子组件时，可以通过属性的形式将数据传递给子组件。子组件通过props选项来接收父组件传递的数据。例如： ```vue // 父组件 <template> <div> <child-component :message="parentMessage"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { parentMessage: 'Hello from parent' }; } }; </script> // 子组件 <template> <div> <p>{{ message }}</p> </div> </template> <script> export default { props: ['message'] }; </script> ``` 2. $emit: 子组件通过$emit方法向父组件发送事件，并携带需要传递的数据。父组件监听子组件触发的事件，并在事件处理函数中获取子组件传递的数据。例如： ```vue // 父组件 <template> <div> <child-component @custom-event="handleCustomEvent"></child-component> <p>Message from child: {{ childMessage }}</p> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { childMessage: '' }; }, methods: { handleCustomEvent(message) { this.childMessage = message; } } }; </script> // 子组件 <template> <div> <button @click="sendMessage">Send Message to Parent</button> </div> </template> <script> export default { methods: { sendMessage() { this.$emit('custom-event', 'Hello from child'); } } }; </script> ``` 这些是Vue中父子组件之间传值的两种常见方式，根据具体场景选择合适的方式进行数据传递。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我才是真的封不觉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值