Vue之组件间传值
标签: Vue
Vue之父子组件传值
- 父向子传递通过props
- 子向父传递通过$emit
代码示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>父子组件传值</title>
<script src="./bower_components/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<counter :count="num1" @add="handAddTotal"></counter>
<counter :count="num2" @add="handAddTotal"></counter>
求和:{{total}}
</div>
<script>
//自定义组件
var counter = {
props:['count'],//通过属性由父向子传值
data: function() {
return {
number: this.count//子组件内接收父级传过来的值
}
},
template: '<div @click="handleClick">{{number}}</div>',
methods: {
handleClick: function() {
this.number ++;
//通过向外触发事件由子级向父级传值
this.$emit('add',1);
}
}
};
var vm = new Vue({
el: '#app',
//组件注册
components: {
counter
},
data:{
num1:1,
num2:2,
total: 3
},
methods:{
//求和
handAddTotal:function(step){
this.total += step;
}
}
});
</script>
</body>
</html>
注意事项:
- props传过来值,根据单向数据流原则子组件不可直接拿过来修改,可以在子组件的data里定义一个变量转存再来做修改
- 为了保证各组件数据的独立性,子组件的data应该以一个函数返回一个对象的形式来定义,见上示例代码23行
Vue之非父子组件传值
- 通过bus方式传递,也可以叫总线/发布订阅模式/观察者模式
- 通过vuex传递
bus/总线/发布订阅模式/观察者模式演示地址
vuex演示地址
bus方式示例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>父子组件传值(bus/总线/发布订阅模式/观察者模式)</title>
<script src="./bower_components/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<child-one content="hello"></child-one>
<child-two content="world"></child-two>
</div>
<script>
Vue.prototype.bus = new Vue();
//自定义组件
var childOne = {
//通过属性由父向子传值
props:{
'content':String
},
data:function(){
return {
contentIn:this.content
}
},
template: '<div @click="handleClick">{{contentIn}}</div>',
methods: {
handleClick: function() {
//通过触发事件向各组件发送数据
this.bus.$emit('change',this.contentIn);
}
},
mounted:function () {
var that = this;
//组件接收事件
this.bus.$on('change',function(val){
that.contentIn = val;
});
}
};
//自定义组件
var childTwo = {
//通过属性由父向子传值
props:{
'content':String
},
data:function(){
return {
contentIn:this.content
}
},
template: '<div @click="handleClick">{{contentIn}}</div>',
methods: {
handleClick: function() {
//通过触发事件向各组件发送数据
this.bus.$emit('change',this.contentIn);
}
},
mounted:function () {
var that = this;
//组件接收事件
this.bus.$on('change',function(val){
that.contentIn = val;
});
}
};
var vm = new Vue({
el: '#app',
//注册组件
components: {
childOne,
childTwo
}
});
</script>
</body>
</html>
vuex方式示例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>父子组件传值(vuex)</title>
<script src="./bower_components/vue/dist/vue.js"></script>
<script src="./bower_components/vuex/dist/vuex.js"></script>
</head>
<body>
<div id="app">
<child-one></child-one>
<child-two></child-two>
</div>
<script>
Vue.use(Vuex);
var store = new Vuex.Store({
state: {
count:0
},
mutations: {
increment:function(state){
console.log(123);
state.count++;
}
},
actions: {
increment:function(context){
context.commit('increment')
}
},
getters: {
getCount:function(state){
return state.count;
}
}
});
//自定义组件
var childOne = {
computed: {
countIn:function(){
return store.getters.getCount
}
},
template: '<div @click="handleClick">{{countIn}}</div>',
methods: {
handleClick: function() {
store.dispatch('increment');
}
}
};
//自定义组件
var childTwo = {
computed: {
countIn:function(){
return store.getters.getCount
}
},
template: '<div @click="handleClick">{{countIn}}</div>',
methods: {
handleClick: function() {
store.dispatch('increment');
}
}
};
var vm = new Vue({
el: '#app',
store,
//注册组件
components: {
childOne,
childTwo
}
});
</script>
</body>
</html>
附上vuex官网地址:https://vuex.vuejs.org/zh/
Vue之组件间传值的更多相关文章
- Vue中组件间传值常用的几种方式
版本说明: vue-cli:3.0 一.父子组件间传值 1.props/$emit -父组件==>>子组件: 子组件中通过定义props接收父组件中通过v-bind绑定的数据 父组件代码 ...
- Vue学习(二)-Vue中组件间传值常用的几种方式
版本说明:vue-cli:3.0 主要分为两类: 1.父子组件间的传值 2.非父子组件间的传值 1.父子组件间传值 父组件向子组件传值 第一种方式: props 父组件嵌套的子组件中,使用v-bind ...
- vue——父子组件间传值
(1)父组件给子组件传值(商品详情页): 根据订单类型,判断显示立即购买/立即拼单: 通过props来传递参数 父组件(商品详情页) 父组件调用子组件,在子组件的标签中,通过:数据名称=”数据”的形式 ...
- Vue 组件间传值
前言 Vue 作为现在比较火的框架之一,相信您在使用的过程中,也会遇到组件间传值的情况,本文将讲解几种 Vue 组件间传值的几种方法,跟着小编一起来学习一下吧! 实现 注意: 学习本文,需要您对 Vu ...
- vue组件定义方式,vue父子组件间的传值
vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...
- Vue中组件间通信的方式
Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.隔代组件之间通信. props $emit 这种组件通信的方式是我们运用的非常多的一种,props以单向数据流的形式可以很好的完成父 ...
- vue父子组件之间传值
vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...
- vue父子组件的传值总结
久违的博客园我又回来了.此篇文章写得是vue父子组件的传值,虽然网上已经有很多了.写此文章的目的就是记录下个人学习的一部分.接下来我们就进入主题吧! 在开发vue项目中,父子组件的传值是避免不掉的. ...
- react组件间传值详解
一.父子组件间传值 <1>父传子 父组件:
随机推荐
- EXTJs前后台交互 常用哦3种方式
<1>Ajax交互方式 Ext.Ajax.request( { //被用来向服务器发起请求默认的url url : "", //请求时发送后台的参数,既可以是Json对 ...
- STL学习笔记--临时对象的产生与运用
所谓的临时对象,就是一种无名对象(unnamed objects).它的出现如果不在程序员的预期之下,往往造成效率上的负担.但有时刻意制造一些临时对象,却又是使程序干净清爽的技巧.刻意制造临时对象的方 ...
- MVC(Java , C# ,php)
- LAMP之PHP
保持apache.mysql正在运行 [root@cairui php-]# lsof -i tcp: COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NA ...
- P3628 [APIO2010]特别行动队
\(\color{#0066ff}{ 题目描述 }\) 你有一支由 \(n\) 名预备役士兵组成的部队,士兵从 \(1\) 到 \(n\) 编号,要将他们拆分 成若干特别行动队调入战场.出于默契的考虑 ...
- NOIP2018初赛总结(提高组)(试题+答案+简要解析)
NOIP2018初赛总结(提高组) 更新完毕(纯手敲),如果有错误请在下面留言 单选题 T1.下列四个不同进制的数中,与其它三项数值上不相等的是 A.\((269)_{16}\) B.\((617)_ ...
- kuangbin专题十二 HDU1114 Piggy-Bank (完全背包)
Piggy-Bank Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...
- CSS3中的vh、vw及其应用场景
需求:我们项目的需求是 一.vh vw vw和vh是相对于视口(viewport)的宽度和高度.由于现在移动设备的屏幕尺寸之差别,如果仍然根据屏幕的物理分辨率来设计网页,效果很难统一,因此html ...
- 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_类型转换
1. C# 不要求任何特殊语法即可将一个对象转换为它的任何基类型,因为向基类型的转换被认为是一种安全的隐式转换: 2. 然而,将对象转换为它的某个派生类型时,C#要求开发人员只能进行显示转换,因为这样 ...
- Gym - 101615 D Rainbow Roads dfs序
题目传送门 题目大意: 给出一颗树,每条边都有一个颜色,对一个点来说,如果其他所有点到这个点的简单路径,相连的边颜色都不同,这个点即合法点,统计所有的合法点. 思路: 对于一个节点来说 1.如果这个节 ...