非父子组件间的传值

最新推荐文章于 2023-02-01 17:33:51 发布
最新推荐文章于 2023-02-01 17:33:51 发布
阅读量1.1k 收藏
点赞数
分类专栏： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41153478/article/details/80335819
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>非父子组件的传值（bus/总线、发布者订阅模式、观察者模式</title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="root">
<!--兄弟之间的关系如何进行传值呢 把上面的dell传给下面的li  通过总线传递-->
<child content="dell"></child>
<child content="li"></child>
</div>
<script>
Vue.prototype.bus = new Vue()//每调用Vue实例都会含有bus属性,bus是vue的实例
Vue.component('child',{
props:{
content:String
//参数校验
},
template:'<div @click="handleClick">{{content}}</div>',
methods:{
handleClick:function  () {
// alert(this.content);把弹出的内容传递出去


//$emit 里的参数第一个是事件名,第二个是传递的东西 emit来传递
this.bus.$emit('change',this.content)
}
},
mounted:function  () {//声明周期钩子函数来  监听传来的数据 on来监听bus触发的时间
var this_ = this 
this.bus.$on('change',function  (msg) {
this_.content = msg
//alert(msg)
})
}
})
var vm= new Vue({
el:"#root",

})
</script>
</body>

</html>

上面的值传给下面，但是报错了，以内墙改了父组件传来的值，所以要定义data函数在子组件里

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>非父子组件的传值（bus/总线、发布者订阅模式、观察者模式</title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="root">
<!--兄弟之间的关系如何进行传值呢 把上面的dell传给下面的li  通过总线传递-->
<child content="dell"></child>
<child content="li"></child>
</div>
<script>
Vue.prototype.bus = new Vue()//每调用Vue实例都会含有bus属性,bus是vue的实例
Vue.component('child',{
data:function(){
return{
selfContent:this.content
}
},
props:{
content:String
//参数校验
},
template:'<div @click="handleClick">{{selfContent}}</div>',
methods:{
handleClick:function  () {
// alert(this.content);把弹出的内容传递出去


//$emit 里的参数第一个是事件名,第二个是传递的东西 emit来传递
this.bus.$emit('change',this.selfContent)
}
},
mounted:function  () {//声明周期钩子函数来  监听传来的数据 on来监听bus总线触发的事件
var this_ = this 
this.bus.$on('change',function  (msg) {
this_.selfContent = msg
//alert(msg)
})
}
})
var vm= new Vue({
el:"#root",

})
</script>
</body>
</html>

依米_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
非父子组件之间的三种传值办法
Qian_mos的博客
04-22 3739
非父子组件之间的传值 兄弟组件的传值：总线—发布订阅者—观察者模式 Vue.prototype.属性 = new Vue()，使Vue的原型上的属性等于Vue实例 <div id="root"> <child content="miss"></child> <child content="mos"></child> &l...
Angular中，非父子组件如何传参
Yasuo的博客
04-17 205
这样，当你在点击事件的组件中点击按钮时，就会调用StepService服务的setIsDisplay函数，并更新isDisplay的值。在WorkerOrderEditComponent组件中订阅这个服务的isDisplay$对象，并在isDisplay值发生变化时更新step数组。这样就可以实现这两个组件之间的通信了。如果点击事件和WorkerOrderEditComponent不在同一个文件中，你可以使用Angular的服务来实现它们之间的通信。
【Vue3 第十六章】非父子组件间传值
前端知识分享喵
02-01 1126
非父子组件传参
vue 非父子组件之间实现数据传递 vuex
苏先生前端
12-02 1274
我们知道父子组件直接的数据传递通过标签属性行间 将数据挂在到了标签上 子组件中通过props特性验证来获取来自父组件的数据 进行渲染 在非父子组件中也借用这样的原理 原理图如下 第一种 子传父 父传子 特点 ： 传值要经过父组件 不断寻找各组件之间的从属关系 操作复杂 适合一层 父子兄弟组件传递 代码如下： //子组件1传值到父组件 <template> ...
Angular 父子组件传值，非父子组件传值
qq_34416331的博客
11-13 997
一、子组件调用父组件，父组件给子组件传值 引入Input header.component.ts import { Component, OnInit, Input, Output } from '@angular/core'; @Component({ selector: 'app-header', templateUrl: './header.component.html',...
Vue非父子组件之间传值
01-08
这就是非父子组件间通信的一种有效方式。 总结来说，Vue的Bus机制是一种实用的工具，它允许我们在不依赖于父子关系或Vuex等状态管理库的情况下，实现组件间的通信。通过创建一个全局的事件总线，我们可以将事件和...
vue非父子组件间的传值
01-08
在组件体系结构中，有时我们需要在非父子组件间传递数据，这通常涉及到事件总线（Event Bus）或者Vuex状态管理库。这里我们将详细讨论如何使用事件总线实现非父子组件间的通信。 ### 1. 创建事件总线（Event Bus） ...
Vue组件通信中非父子组件传值知识点总结
10-15
总结来说，理解非父子组件传值的关键在于掌握事件总线的使用。通过创建一个独立的Vue实例作为事件总线，组件可以触发和监听自定义事件，以此达到数据的传递。这种方法简单易用，但不适用于大型应用，因为随着组件...
详解vue父子组件间传值(props)
08-30
本篇文章主要介绍了详解vue父子组件间传值(props)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
浅谈Vue父子组件和非父子组件传值问题
08-29
Vue 组件传值问题是 Vue 开发中非常重要的一个话题，涉及到父子组件和非父子组件之间的传值问题。今天，我们将一步步地介绍如何在 Vue 中实现组件传值。 组件的创建 创建组件是 Vue 开发的基础步骤。下面是一个...
篇三、组件通信（非父子组件间传值 Vuex ~ 状态管理）
非为000的博客
07-24 2625
Vuex用法 vuex主要使用场景为大型单页面应用，更适合多人协同开发。 vuex写法多种，在此只写两种自认为最常用方案。 步骤一：vuex安装、全局引入 利用npm包管理工具安装，命令行如下（注：在开发环境中安装vuex时，需要加 --save）： npm install vuex --save 步骤二：vue-cli中使用vuex的方式 为了后续维护，...
非父子组件如何传值？
weixin_30696427的博客
06-22 67
定义个公共的公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果。 //bus.js import Vue from 'vue' export default new Vue() // 引入公共的bug，来做为中间传达的工具 import Bus from './bus.js' 通过Bus.$emit('tag', this.elementValue)在当前组...
React 组件基本使用(三) ---父子组件之间的通信
try my best
09-26 856
React 组件基本使用(三) ---父子组件之间的通信 　　当有多个组件需要共享状态的时候，这就需要把状态放到这些组件共有的父组件中，相应地，这些组件就变成了子组件，从而涉及到父子组件之间的通信。父组件通过props 给子组件传递数据，子组件则是通过调用父组件传给它的函数给父组件传递数据。 　　很简单的一个例子，我们在输入框中输入温度，输入框下面显示冷和热。这里就有两
vue 非父子组件传值
fighting_sunnyGirl的博客
03-05 535
页面A &lt;template&gt; &lt;div class="hello"&gt; &lt;h1 @click="store"&gt;{{ msg }}&lt;/h1&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default { name: 'myHel
vue中非父子组件传值
zl13015214442的博客
02-24 1494
我们在之前的文章中提到过，父组件向子组件传值时是利用定义属性来传值的，而子组件向父组件传值是通过事件
vue非父子间传值
sunshinezhangyu的博客
07-02 236
非父子之间的传值， 1.新建一个js文件，然后引入vue实列化vue，最后暴露，以下就是emitEvent.js文件内容 import Vue from ‘vue’ export default new Vue; 2.在传值的文件中引入emitEvent.js文件 使用对象.$emit(key,value)传值 3.在接收文件中引入emitEvent.js文件 使用对象.$on(key,funct...
react同级组件之间传值
热门推荐
小白变怪兽
07-12 1万+
react同级组件之间进行传值
angular4父组件向子组件传值，子组件向父组件传值的方法
weixin_33967071的博客
12-19 850
父组件向子组件传值 @Input 文件目录 父组件： father.template.html <h1>父组件</h1> <cmt-child [data]='data'></cmt-child> father.component.ts import { Component, OnIn...
父子组件间传值方式
最新发布
05-30
在 Vue 中，父子组件之间传值可以使用 props 和 emit 两种方式。 1. props：父组件通过 props 属性向子组件传递数据，子组件通过 props 来接收数据。具体而言，可以在子组件中声明 props，然后在父组件中使用 v-bind 来绑定数据。例如： ```html <!-- 父组件 --> <template> <child-component :message="parentMessage"></child-component> </template> <!-- 子组件 --> <template> <div>{{ message }}</div> </template> <script> export default { props: { message: String } } </script> ``` 2. emit：子组件通过 emit 方法向父组件发送事件，并传递数据。父组件可以通过 v-on 来监听子组件发送的事件，并接收数据。具体而言，可以在子组件中使用 $emit 方法来发送事件，然后在父组件中使用 v-on 来监听事件。例如： ```html <!-- 父组件 --> <template> <div> <child-component @my-event="handleChildEvent"></child-component> <p>{{ message }}</p> </div> </template> <script> export default { data() { return { message: '' } }, methods: { handleChildEvent(data) { this.message = data } } } </script> <!-- 子组件 --> <template> <button @click="handleClick">Click me</button> </template> <script> export default { methods: { handleClick() { this.$emit('my-event', 'hello from child') } } } </script> ``` 以上两种方式都可以用于父子组件之间的传值，具体使用哪种方式，需要根据具体场景来选择。如果是单向数据流，建议使用 props；如果是需要在子组件中触发事件，建议使用 emit。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值