vue-router 使用二级路由去实现子组件的显示和隐藏
在需求中有一个这样的情况:一个组件在主组件和另外的组件中引用,且点击主组件和这个组件分别有相应得切换事件。
一开始的时候我是没有划分组件,把它们放到主组件内,这样便于切换,但是主主件内有独立的部分需要被其他页面引用;
然后我把组件拆分,但还是在反复切换中,并没有实现需求的效果,然后我就把这个公共的部分分别作为两个组件的子路由,在切换的时候让它相同的页面进行处理不同的事件;
实现子路由的配置:
当然还有重要的一点就是你要把·<router-view></router-view>
放到相应的父组件内;
vue-router 使用二级路由去实现子组件的显示和隐藏的更多相关文章
- vue.js利用vue.router创建前端路由
node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...
- vue中.sync修饰符,实现子组件实时更新父组件的值
vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定. 不过它有一个前身,先来看看.sync出现之前是如何实现的 父组件中(传递给子组件一个值:p ...
- vue父组件引用子组件方法显示undefined问题原因及解决方法
关于vue父组件引用子组件问题 1.首先导入子组件并且在components中定义子组件 2.引用子组件,并定义ref,ref定义的名称用于 this.$refs所调用的名称 3.调用子组件的方法 ( ...
- vue中通过.sync修饰符实现子组件修改父组件数据
vue父子通讯是单向数据流,也就是子组件不能修改父组件的值,但是在一些情况下是需要这样做的. 先看官方文档: 接下来举例实现 1.实现一个双向数据绑定,子组件改变的时候,父组件也在改变 父组件 < ...
- vue中把一个事件绑定到子组件上
官网上是这样描述的 你可能有很多次想要在一个组件的根元素上直接监听一个原生事件.这时,你可以使用 v-on的 .native 修饰符 父组件App.vue <template> <d ...
- vue全局引入公共scss样式,子组件调用
前提 已引用并使用scss npm install sass-loader --save-dev npm install node-sass --sava-dev 配置 在vue.config.js中 ...
- vue项目|在弹窗中引入uchart图表子组件不显示
为了解决uchart作为子组件在主组件里引用但不显示的情况,(同样适用于弹窗之中)目前有三种方法. 1-解决方式 1>如果你使用的uchart子组件是从官方拿的例子:进入到uchart子组件将o ...
- vue <compent> 结合is实现动态切换子组件
这里就很自然的产生一个新问题:如何给相应的子组件传props?
- Vue.js 2使用中的难点举例--子组件,slot, 动态组件,事件监听
一例打尽..:) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
随机推荐
- 对 HTTP HTTPS的认识
1.HTTP:超文本传输协议 -以明文的形式传输 -效率更高,但是不安全 2.HTTPS:HTTP+SSL -传输之前数据先加密,之后在揭秘 -效率低,但是安全 3.get请求和post请求的区别 - ...
- 域名访问和ip访问区别
域名访问和ip访问区别 ip访问对应某一台确定的服务器: 域名访问相当于在ip访问的基础上,做了一个反向代理的中间功能.例如:百度,很多人会同时使用,如果使用的是同一台服务器的话,服务器估计会扛不住, ...
- 使用jquery Ajax异步刷新 下拉框
一个下拉框 <label>产品类型:</label> <select id="protype" name="protype" on ...
- postgresql like 中的转义
select * from tb_org where char_length(xdm)>8 and xdm not like '%*_%' ESCAPE '*' ESCAPE 后面的 * 是转 ...
- testprns printername [printcapname]
描述 此程序是samba套件的一部分. testprns是个非常简单的测试程序,用于检查smbd作为服务提供的打印机名是否合法. 在这里“Valid”的意思就是“在printcap中可以找到该打印机” ...
- C stdarg.h
参考:https://www.cnblogs.com/bettercoder/p/3488299.html 博主:运动和行动 va_start宏,获取可变参数列表的第一个参数的地址(list是类 ...
- 【转】前后端分离架构:web实现前后端分离,前后端解耦
一.前言 ”前后端分离“已经成为互联网项目开发的业界标杆,通过Tomcat+Ngnix(也可以中间有个Node.js),有效地进行解耦.并且前后端分离会为以后的大型分布式架构.弹性计算架构.微服务架构 ...
- PHP 的 new static 和 new self
下面我们举个例子: class Father { public static function getSelf() { return new self(); } public static funct ...
- 二进制搭建一个完整的K8S集群部署文档
服务器规划 角色 IP 组件 k8s-master1 192.168.31.63 kube-apiserver kube-controller-manager kube-scheduler etcd ...
- shiro实现用户踢出功能
shiro实现用户踢出功能 KickoutSessionControlFilte import java.io.IOException; import java.io.PrintWriter; imp ...