vue组件传值 part2
非父子组件传值
轻量级 视图层框架
复杂组件间传值,引进其他的工具或者设计模式
1.vuex
2.总线机制
//main line 1.在main.js中注册全局的bus Vue.prototype.bus=new Vue(); 2.在组建中使用 子组建使用:this.bus.$emit('自定义事件名',data) methods:{
handleClicks(){
this.bus.$emit('openMenu',true)
}
} 父组建使用: this.bus.$on("自定义事件名", msg => {}) mounted() {
this.bus.$on("openMenu", msg => {
this.show = msg;
}); }
vue组件传值 part2的更多相关文章
- Vue—组件传值及vuex的使用
一.父子组件之间的传值 1.父组件向子组件传值: 子组件在props中创建一个属性,用以接收父组件传来的值 父组件中注册子组件 在子组件标签中添加子组件props中创建的属性 把需要传给子组件的值赋给 ...
- vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus
vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...
- Vue组件传值方法调用
1.子组件改变父组件的值 <father label="云盘快照" name="name2"> <son :props='rows' @ ...
- vue ---- 组件传值之间使用 v-model
父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa" 子组件使用$emit('update:msg', 'msg改变后的值xxx ...
- vue组件传值的三种方式,文字版解释
父传子: 当子组件子父组件中当标签使用的时候,给子组件添加一个自定义属性,值为需要传递的值(如: <Child v-bind:parentToChild="parentMsg" ...
- Vue组件传值,父传子,子传父,非父子组件
vue3中传值方式: 1.父组件向子组件传值 父组件Blog.vue <template> <div id="blog"> <Alert v-if=& ...
- Vue 组件 传值
注意 Vue模板只能有一个对象,要想用多个对象时用div包裹 一.父组件->子组件 通过props 1.子组件: 声明:proprs =[‘xx’],xx是在父组件中引用子组件,子组件的属性(t ...
- Vue组件传值(二)之 非父子组件传值
Vue中非父子组件之间是如何实现通信的? 本章主要讲的是非父子组件传值,父子组件传值请看上一篇文章. 1.创建新的Vue实例引入项目中,通过$emit.$on来实现非父子组件传值: 1 <!DO ...
- Vue组件传值(一)之 父子之间如何传值
Vue中组件之间是如何实现通信的? 1.父传子: 父传子父组件通过属性进行传值,子组件通过 props 进行接受: 1 父组件中: 2 3 <template> 4 <div id= ...
随机推荐
- ACM-吴奶奶买鱼
题目描述:吴奶奶买鱼 吴奶奶有个可爱的外孙女——琪琪,她很喜欢小动物,尤其喜欢养鱼.为了让小孙女养到漂亮的小鱼,吴奶奶一大早就到花鸟鱼虫市场买鱼.这个市场可真大,里面有各种各样的宠物,就连宠物鱼都 ...
- How To Configure NFS Client on CentOS 8 / RHEL 8
https://computingforgeeks.com/configure-nfs-client-on-centos-rhel/
- C++面试常见问题——05字符串的逆序
字符串的逆序 #include<iostream> #include<string.h> using namespace std; void ReverseStr(char s ...
- SQL语句--分组统计
一.教师号 星期号 是否有课1 2 有1 3 有2 1 有3 2 有`1 2 有写一条sql语句让你变为这样的表教师号 星期一 星期二 星期三1 2 12 13 1各星期下的数字表示:对应的教师在星期 ...
- 如何创建一个Asp .Net Web Api项目
1.点击文件=>新建=>项目 2.创建一个Asp .NET Web项目 3.选择Empty,然后选中下面的MVC和Web Api,也可以直接选择Web Api选项,注意将身份验证设置为无身 ...
- 八、JavaScript之执行语句
一.代码如下 二.运行结果如下 <!DOCTYPE html> <html> <meta http-equiv="Content-Type" cont ...
- 103-PHP定义一个类
<?php class ren{ //定义人类 } class mao{ //定义猫类 } new ren(); //实例化人类 new mao(); //实例化猫类 new mao(); // ...
- springMvc接收json和返回json对象
导入三个包 页面: function sendJson(){ //请求json响应json $.ajax({ type:"post", url: "${pageConte ...
- es6的...
es6的... (1):函数rest参数和扩展 sum1(...sum){//传多个参数 let total=0; for( ...
- kibana下载与安装
目录 简介 下载 安装 测试 简介 Kibana是一个为ElasticSearch 提供的数据分析的 Web 接口.可使用它对日志进行高效的搜索.可视化.分析等各种操作.安装之前有话说: 安装路径不要 ...