Vue 组件的通信
vue不得不了解的就是组件间的数据通信(暂且不谈vuex插件)。
通信方式根据组件之间的关系有不同之处。
组件关系有下面三种:父-->子、子-->父、非父子
1、父-->子
父向子传递数据用prop
<!--子组件代码-->
<template>
<div> {{message}} </div>
</template> <script>
export default{
name="child",
prop: ['message'], //利用prop函数,定义一个"message"变量
data(){ }
}
</script>
<!--父组件代码-->
<template>
<v-child message="msg"> </v-child><!--在这里传值-->
</template>
<script>
import Child from './child.vue'
export default{
name: 'parent',
components: { 'v-child': Child },
data(){
return{ msg:'hello world'
}
}
</script>
2.子组件给父组件传值($emit) 子组件给父组件传值的中心思想是;通过方法传参,具体用法如下:
<!-- 子组件部分 --> <script>
data(){
return{
msg: '123'
}
},
method: {
funcName: function(){
this.$emit("tanslate",this.msg)
//自定义一个tanslate和一个参数this.msg
}
}
</script>
父页面HTML部分: 通过子页面定义tanslate事件调用自定的tanslateText方法
<v-child v-on:tanslate="tanslateText"> </v-child>
父页面js部分:
method:{
tanslateText:function(text){ //text是字组件传过来的参数
console.log(text) //打印出子组件传递过来的参数
}
}
3.兄弟组件之间传值 创建一个store.js文件,注册Vuex
import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex) //定义state,并将listName设置成一个空对象
const state = {
listName:{}
} /定义mutations,可以传参数,用于设置state里的listName
const mutations = {
set_listname : (state, value) => {
state.listName = value ;
}
} //定义getters,用于获取state里的对象
const getters = {
get_listname: state => {
return{ state.listName
}
} export default new Vuex.store({
getters,
state,
mutations
})
在vue实例中注册store.js
//main.js import Vue from 'vue'
import App from './App'
import store from './style' new Vue({
el : '#app',
route,
store,
template: '<App/>',
components: {App}
})
后续补充完善
Vue 组件的通信的更多相关文章
- vue组件间通信六种方式(完整版)
本文总结了vue组件间通信的几种方式,如props. $emit/ $on.vuex. $parent / $children. $attrs/ $listeners和provide/inject,以 ...
- Vue组件间通信6种方式
摘要: 总有一款合适的通信方式. 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的 ...
- VUE组件如何通信
Vue父子组件如何通信? 子组件通知父组件(调用父组件方法) 在父组件使用 on(eventName)监听事件,在子组件使用emit(eventName) 触发事件 : 父组件通知子组件(调用子组件方 ...
- 前端面试 vue 部分 (5)——VUE组件之间通信的方式有哪些
VUE组件之间通信的方式有哪些(SSS) 常见使用场景可以分为三类: 父子通信: null 父向子传递数据是通过 props ,子向父是通过 $emit / $on $emit / $bus Vuex ...
- Vue 组件之间通信 All in One
Vue 组件之间通信 All in One 组件间通信 1. 父子组件之间通信 https://stackblitz.com/edit/vue-parent-child-commutation?fil ...
- vue组件之间通信传值
原文链接:https://blog.csdn.net/lander_xiong/article/details/79018737 我认为这位博主的这篇文章写的非常详细,通俗易懂, 我们这次的vue项目 ...
- vue组件间通信
组件间通信(父子,兄弟) 相关链接\组件通信http://www.cnblogs.com/xulei1992/p/6121974.html 学习链接Vue.js--60分钟快速入门http://www ...
- vue组件之间通信的8种方式
对于vue来说,组件之间的消息传递是非常重要的,下面是我对组件之间消息传递的常用方式的总结. props和$emit(常用) $attrs和$listeners 中央事件总线(非父子组件间通信) v- ...
- vue组件兄弟间通信
四.兄弟组件间通信(event) 借助于一个公共的Vue的实例对象,不同的组件可以通过该对象完成事件的绑定和触发 var bus = new Vue(); bus.$emit()bus.$on() 熊 ...
- vue组件间通信子与父
二.组件间通信(子组件传值给父组件) 通过事件的方式来完成数据的传输. ①在父组件中 定义一个方法,用来接收子组件所通过事件传来的值 methods:{ recvMsg:function(msg){ ...
随机推荐
- 2个CDH的hive数据同步
算法和数仓共用一套hive数据: CM: 真实数据: 都存在共享存储: oss, s3,ufile上. CDH配置能访问的权限(key)
- js文本公告滚动展示,图片轮播....
1.引入文件 <link rel="stylesheet" href="/css/liMarquee.css"> <script src=&q ...
- Spring使用小结
- WUSTOJ 1274: 喂,这里是帅帅的LCM(Java)
1274: 喂,这里是帅帅的LCM 题目 在一组数中,找出个数为奇数的数.更多内容点击标题. 分析 其实这种题并不难,做过一次之后,绝对不会错第二次.通过读题可以发现,我们要找的那个数在这一堆 ...
- Linux虚拟机常用命令
参考原文链接:(https://blog.csdn.net/fanyun_01/article/details/51083585) 一.Linux虚拟机常用命令 # virsh list //查看已打 ...
- CTS & APIO 2019 游记
写在前面 算是省选后的第一轮大考. 去年因为某些原因并没有参加 CTSC 以及 APIO,还是有些遗憾,所以希望今年能有所收获. 也希望今年的 CTS 能延续去年的出题风格,这样我还能苟一两个题. 然 ...
- (八)easyUI之Accordion折叠面板:动态面板
二.动态面板 数据库设计 函数设计:该函数用于获取某个节点的所有子节点 CREATE FUNCTION fn_getAddress_ChildList_test(rootId INT) RETURNS ...
- 【原创】大叔经验分享(88)jenkins假死
jenkins安装启动后,使用systemctl来进行进程监控 # systemctl enable jenkins 但是还是经常发生jenkins进程挂了,不会自动重启,通过systemctl查看状 ...
- sudo pip3找不到命令
转自: https://blog.csdn.net/Cryhelyxx/article/details/53384004 编辑/etc/sudoers 找到Defaults env_reset, 将其 ...
- c去除空格 小写转大写
int isalnum(int c); //字母或数字 int isalpha(int c); //英文字母 int isascii(int c); //ASCII 码字符(0 到127) int i ...