vue中非父子组件传值

        我们使用 $emit发送数据使用 $on监听数据vue非父子组件传值1 创建公共实例化对象const bus=new Vue()2 在需要发送数据的组件中自定义方法 使用bus.$emit发送数据<button @click="方法名">发送数据</button>methods: {方法名() {bus.$emit('自定义方法',要发送的数据应)}}3 在需要接收数据的组件生命周期created中 使用bus.$on监听数据  created() {bus.$on('自定义方法', (data)=> {console.log(data)  // data就是从另一个组件中发送过来的数据})}

eg：非父子简单传值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><child1></child1><child2></child2></div><script src="vue.js"></script><script>const bus=new Vue()Vue.component('child1', {data() {return {num: 100000}},template: `<div class="child1">child1组件<button @click="sendData">发送数据</button></div>`,methods: {sendData() {bus.$emit('send-val', this.num)}}})Vue.component('child2', {data() {return {msg: 0}},template: `<div class="child2">child2组件--{{msg}}</div>`,// 需要在生命周期钩子函数created里边执行 $on监听created() {bus.$on('send-val', (data)=> {console.log(data)this.msg=data})//注意上面使用箭头函数，是为了改变 this 指向}})const app=new Vue({el: "#app",data: {}})</script>
</body>
</html>

eg：非父子组件实现评论列表实例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><ipt></ipt><lists></lists></div><script src="vue.js"></script><script>const bus=new Vue()Vue.component('ipt', {data() {return {msg: ''}},template: `<div class="ipt"><input type="text" v-model="msg"><button @click="sendData">发表</button>    </div>`,methods: {sendData() {bus.$emit('send-data', this.msg)this.msg=''}}})Vue.component('lists', {data() {return {lists: []}},template: `<ul v-if="lists.length"><li v-for="(list, index) in lists" :key="index" @click="del(index)">{{list}}</li>    </ul><p v-else>暂无内容</p>`,created() {bus.$on('send-data', (data)=> {this.lists=[...this.lists,data]})},methods: {del(i) {this.lists.splice(i,1)}}})new Vue({el: "#app",data: {}})</script>
</body>
</html>

vue中非父子组件传值相关推荐

Vue中父子组件传值的多种方式
vue中父子组件传值 vue中的父子组件传值,值得注意的是要遵守单向数据流原则.所谓单向数据流原则,简单的说就是父组件的数据可以传递给子组件,子组件也可以正常获取并使用由父组件传过来的数据:但是,子组 ...
父子组建传值_详解Vue之父子组件传值
一.简要介绍父子组件之间的传值主要有三种:传递数值.传递方法.传递对象,主要是靠子组件的 props 属性来接收传值,下面分别介绍: (一)传递数值 1.子组件:Header.vue {{msg}} ...
Vue非父子组件传值
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.非父子组件传值二.事件总线 2.$attrs / listeners VueX是笔者认为最稳定的非父子传值的方法 ...
六十一、Vue中父子组件传值和组件参数校验
@Author:Runsen @Date:2020/10/17 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的日积月累,需要强大 ...
关于Vue非父子组件传值
熟悉了Vue.js的同级组件之间通信,写此文章,以便记录. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述. 使用NPM及相关命令行工具初始化的Vue工程,目录结 ...
vue中非父子组件通信
在上一篇博客中,我们总结了父子组件通信方式有:props + emit.这里我们将总结一下,非父子组件通信方式,这里还不涉及到Vuex. 如果存在祖孙组件,我们可以通过Provide和Inject进行 ...
vue + typescript 父子组件传值记录
为什么80%的码农都做不了架构师?>>> typescript 使用 vue-property-decorator 插件后组件通信做一个记录 1. 父传子父: <s ...
Vue非父子组件传值+案例cnode首页
1. 创建公共实例化对象 const bus=new Vue() 2. 在需要发送数据的组件中绑定事件使用 bus.$emit发送数据 <button @click="send&q ...
[Vue]非父子组件传值(bus/总线/观察者模式/发布订阅模式)
核心: 在vue原型中挂载vue实例通过this.bus.$emit('事件名', '参数')向外触发事件和传递参数在生命周期函数mounted中,通过this.bus.$on('传递出来的事件名 ...

vue中非父子组件传值

vue中非父子组件传值

eg：非父子简单传值

eg：非父子组件实现评论列表实例

vue中非父子组件传值相关推荐

最新文章

热门文章

vue中非父子组件传值

vue中非父子组件传值

eg： 非父子简单传值

eg：非父子组件实现评论列表实例

vue中非父子组件传值相关推荐

最新文章

热门文章

eg：非父子简单传值