vue中父子间传值和非父子间传值
vue传值一般分三种方式:父组件向子组件传值、子组件向父子间传值、非父子组件进行传值
一、父组件向子组件传值:父组件引用子组件后,通过数据绑定(v-bind)向子组件传值
父组件:
<template>
<div>
<h1>父组件</h1>
<router-view v-bind:fatherData="data"></router-view>
</div>
</template> <script>
export default {
data () {
return {
data: '父组件数据data'
};
}
}
</script>
子组件:把父组件传递过来的数据, 在 props数组 中定义一下,使用prop中接收的数据
<template>
<div>
<h1>子组件</h1>
<p>父组件数据:{{fatherData}}</p>
</div>
</template> <script>
export default {
props: ['fatherData'],
data () {
return { };
}
}
</script>
二、子组件向父组件传值:子组件通过事件向父组件传值,通过$emit 触发将子组件的数据当做参数传递给父组件
父组件:
<template>
<div>
<h1>父组件</h1>
<router-view @show="showFather"></router-view>
</div>
</template> <script>
export default {
data () {
return {
sonData: '',
sonData2: ''
};
},
methods: {
showFather (val1, val2) {
this.sonData = val1;
this.sonData = val2;
console.log('子组件的值'+a+'=========='+b);
}
}
}
</script>
子组件:
<template>
<div>
<h1>子组件</h1>
<Button type="primary" @click="sonClick">像父组件传值</Button>
</div>
</template> <script>
export default {
data () {
return {
sonData1: '子组件第一个数据',
sonData2: '子组件第二个数据'
};
},
methods: {
sonClick () {
this.$emit('show', this.sonData1, this.sonData2);
}
}
}
</script>
三、非父子组件进行传值:非父子组件之间传值,需要定义个公共的公共实例文件bus.js,作为中间仓库来传值,不然路由组件之间达不到传值的效果。
bus.js
//bus.js
import Vue from 'vue'
export default new Vue()
组件A:
<template>
<div>
A组件:
<span>{{elementValue}}</span>
<input type="button" value="点击触发" @click="elementByValue">
</div>
</template>
<script>
// 引入公共的bug,来做为中间传达的工具
import Bus from './bus.js'
export default {
data () {
return {
elementValue: 4
}
},
methods: {
elementByValue: function () {
Bus.$emit('val', this.elementValue)
}
}
}
</script>
组件B:
<template>
<div>
B组件:
<input type="button" value="点击触发" @click="getData">
<span>{{name}}</span>
</div>
</template>
<script>
import Bus from './bus.js'
export default {
data () {
return {
name: 0
}
},
mounted: function () {
var vm = this
// 用$on事件来接收参数
Bus.$on('val', (data) => {
console.log(data)
vm.name = data
})
},
methods: {
getData: function () {
this.name++
}
}
}
</script>
vue中父子间传值和非父子间传值的更多相关文章
- vue传值(父子传值,非父子传值)
vue组件传值,分为父子传值和非父子传值,父子传值又分为父传子和子传父. 组件之间的传值,实现了数据的联动,是从操作Dom到操作数据一个跳转性的突破,在学习vue双向绑定原理之后, 这种观念就应该继续 ...
- vue中父子组件之间的传值、非父子组件之间的传值
在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...
- vue父子传值与非父子传值
大概梳理下传值的几种方式 一:父子组件传值 props方式 子组件对外暴露方法并向父组件传递由于触发方法导致的值的变化,父组件接收子组件传递来的值:子组件接收父组件传递来的值,并根据传递来的值在子组件 ...
- vue 父子之间通信及非父子之间通信
直接看图说话 vue Bus总线 import Vue from 'vue';import VueBus from 'vue-bus';Vue.use(VueBus); 这是子组件要发到父组件的写法 ...
- Vue组件传值,父传子,子传父,非父子组件
vue3中传值方式: 1.父组件向子组件传值 父组件Blog.vue <template> <div id="blog"> <Alert v-if=& ...
- vue中8种组件通信方式, 值得收藏!
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就 ...
- Vue中你可能认为是bug的情况原来是这样的
前言 我们知道Vue框架剧本双向数据绑定功能,在我们使用方便的同时,还有一些细节问题我们并不知道,接下来一起探讨一些吧 双向数据绑定 js变量改变影响页面 页面改变影响js变量 Vue2是如何做到数据 ...
- 简述在Vue脚手架中,组件以及父子组件(非父子组件)之间的传值
1.组件的定义 组成: template:包裹HTML模板片段(反映了数据与最终呈现给用户视图之间的映射关系) 只支持单个template标签: 支持lang配置多种模板语法: script:配置Vu ...
- Vue—非父子组件间的传值(Bus/发布订阅模式/观察者模式/总线)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- vue知识点15
1.回调地狱的三种方案:函数 promise async await 2. 子组件与子组件之间的传递: 可以借用公共父元素.子组件A this.$emit(" ...
- mysql 必会基础1
1.cmd --> 开启服务:net start mysql 关闭服务:net stop mysql 没有restart命令;命令格式:net stop serviceName;后面不需要加分号 ...
- 观察者模式EventBus
EventBus能够简化各组件间的通信,让我们的代码书写变得简单,能有效的分离事件发送方和接收方(也就是解耦的意思),能避免复杂和容易出错的依赖性和生命周期问题. implementation 'or ...
- vue watch的用法
1.监听对象需要深度监听 ,如下代码可以监听整个msg对象的变化 watch: { msg: { handler(newValue, oldValue) { console.log(newValue) ...
- ArcGIS API for Javascript的Point clustering使用及默认符号无法显示问题
1.将包含ClusterFeatureLayer.js文件的extras文件夹放在部署的arcgis api目录下,如下图. extras路径 2.使用ClusterFeatureLayer关键代码如 ...
- presto 查询每天固定时间段
select task_id,state,createymd,from_unixtime(createtime) "创建时间",manager_name,open_state,ho ...
- vue封装tab切换
vue封装tab切换 预览: 第一种 通过父传子标题,子传父事件 子组件 <template> <div class='app'> <div class="ta ...
- OpenCascade拓扑对象之:TopoDS_Shape的三要素
@font-face { font-family: "Times New Roman" } @font-face { font-family: "宋体" } @ ...
- 导入tensorflow.出现importError: DLL load failed: 找不到指定的模块。
导入tensorflow.出现importError: DLL load failed: 找不到指定的模块. 原因 这是由于windows上没有相应的动态链接库导致的,tensorflow依赖很多c+ ...
- 「SHOI2015」超能粒子炮・改
「SHOI2015」超能粒子炮・改 给你\(T\)组询问,每组询问给定参数\(n,k\),计算\(\sum\limits_{i=0}^k\dbinom{n}{i}\). \(T\leq10^5,n,k ...