vue兄弟组件传递数据
在main.js里面设置data{eventHub:new Vue() }
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App },
data:{
eventHub:new Vue() // 在main.js设置所有组件都能用调用
}, })
我们再组件一设置一个事件调用组件二的事件,传递数据给组件二
<template>
<div v-on:click="on()"></div> </template>
<script>
export default {
data(){
return{
datas:"数据"
}
},
methods:{
on(){
this.$root.eventHunb.$emit("eventName",this.datas) //$emit是触发事件,当我们点击on事件的时候,$emit会触发其他组件的eventName事件, 把this.datas数据传递到其他组件中
}
} } </scrpt>
组件二被触发的事件,接受的参数
<template>
<div>{{datas}}</div>
</template>
<script>
exports default{
data(){
return{
datas:""
}
},
created(){
//组件一跟组件二都要绑定相同的eventName
this.$root.eventHub.$on("eventName",(tar) = > {
this.fn(tar)
//$on是监听事件,如果组件一得$emit触发了,$on就会触发this.fn事件
})
}
methods:{
fn:function(tar){
this.datas = tar
}
}
}
</script>
vue兄弟组件传递数据的更多相关文章
- vue单文件组件形成父子(子父)组件之间通信(vue父组件传递数据给子组件,子组件传递数据给父组件)
看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...
- vue 子组件传递数据跟父组件
子组件 <body> <div v-on:click="test"></div> <script> export default { ...
- Vue子组件传递数据给父组件
子组件通过this.$emit(event,data)传递数据到父组件 以下是例子: father.vue 父组件 <template> <div> <child @ne ...
- vue 父子组件传递数据
单向数据流: 数据从父级组件传递给子组件,只能单向绑定. 子组件内部不能直接修改从父级传递过来的数据. 解决方法: 可以使用data将父组件传递过来的数据拷贝一份存放起来,再修改拷贝的数据就可以了 / ...
- vue 父组件传递数据给子组件
父组件 <body> <div id="app"> <child v-bind:data = "test"></chi ...
- Vue组件传递数据
组件命名 1.字母全小写且必须包含一个连字符 my-componnect 2.使用 kebab-case(短横线分隔命名) 定义一个组件时,你也必须在引用这个自定义元素时使用 kebab-case,例 ...
- vue 父向子组件传递数据,子组件向父组件传递数据方式
父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...
- Vue : props 使用细节(父组件传递数据给子组件)
props使用细节 在Vue.js中我们可以使用 props 实现父组件传递数据给子组件,下面我们总结一下props的使用细节 1.基础类型检查 2.必填数据 3.默认值 4.自定义验证函数 其中每一 ...
- vue子组件使用自定义事件向父组件传递数据
使用v-on绑定自定义事件可以让子组件向父组件传递数据,用到了this.$emit(‘自定义的事件名称’,传递给父组件的数据) <!DOCTYPE html> <html lang= ...
随机推荐
- Java求两个数平均值
如何正确的求2个数的平均值.在练习算法二分查找的时候发现的,以前没有注意到的bug 备注:数据以int类型为例 一.以前的通用写法 /** * 求a+b平均值 * @param a * @param ...
- Bootstrap 使用教程 与jQuery的Ajax方法
jQuery.ajax(url,[settings]) 更加详细的内容参考 jQuery API 中文在线手册 概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单 ...
- gulp介绍及常用插件
前端构建工具gulpjs的使用介绍及技巧 gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nod ...
- Uncaught TypeError: $(...).daterangepicker is not a function
本文为博主原创,未经允许不得转载: 在用bootstrap做一个日期插件的时候,代码和js,css等都是拷贝网上下载下来的实例,但是在 调试的时候,浏览器控制台一直报错 Uncaught TypeEr ...
- React Native控件之Picker
1. import React,{Component}from 'react'; import { AppRegistry, StyleSheet, Text, View, Picker, } fro ...
- hdu 5587 Array 二分
Array Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) Problem ...
- TinyXML用法小结2
参考:http://www.cnblogs.com/hgwang/p/5833638.html TinyXML用法小结 1. 介绍 Tinyxml的官方网址:http://www.grinn ...
- 《剑指offer》第二十四题(反转链表)
// 面试题24:反转链表 // 题目:定义一个函数,输入一个链表的头结点,反转该链表并输出反转后链表的 // 头结点. #include <iostream> #include &quo ...
- 《剑指offer》第二十二题(链表中倒数第k个结点)
// 面试题22:链表中倒数第k个结点 // 题目:输入一个链表,输出该链表中倒数第k个结点.为了符合大多数人的习惯, // 本题从1开始计数,即链表的尾结点是倒数第1个结点.例如一个链表有6个结点, ...
- Shell循环输入符合条件为止
提供用户输入,直到输入d/D/r/R为止. #!/bin/bash ]; do echo -n "(D)ebug or (R)elease?" read select_build_ ...