美文网首页
善用router-view 减少vuex的使用

善用router-view 减少vuex的使用

作者: 水君子Z | 来源:发表于2019-02-19 19:57 被阅读0次

其实,子组件与父组件传值、子路由与父路由传值用的好,就可以大大的减少vuex的使用。
子组件给父组件传至大家都清楚,子路由给父路由传值,有个简单的方法,有很多人应该都没有发现。

父路由代码主要代码

<template>
    <div class="outer_box">
        <router-view @change="childChange"/>
    </div>
</template>
<script>
    export default{
        data(){
            return{
            }
        },
        methods:{
          childChange(res){
           //拿到子路由的回调返回值
            console.log(res)
          }
        }
    }
</script>
 

子路由代码主要代码

<template>
    <div class="child_box">
        <button @click="clickBtn">点击后父路由会触发</button>
    </div>
</template>
<script>
    export default{
        data(){
            return{
            }
        },
        methods:{
            clickBtn(){
                this.$emit('change','提交给父路由的参数')
            }
        }
    }
</script>

相关文章

  • 善用router-view 减少vuex的使用

    其实,子组件与父组件传值、子路由与父路由传值用的好,就可以大大的减少vuex的使用。子组件给父组件传至大家都清楚,...

  • 布局优化

    1、LinearLayout中避免使用weight2、善用TextView的Drawable减少布局层级3、使用i...

  • 2021-09-07 字典数据vuex

    前言:为了减少发送请求次数,字典数据统一放入到vuex管理 vuex封装字典管理 select下拉框使用 通过字典...

  • 04 Vue中组件通信(下)

    使用vuex来实现组件通信一、vuex 的安装与使用 安装npm install vuex -S 使用 二、 vu...

  • Vuex

    1.Vuex概述 2.Vuex基本使用 3.使用Vuex完成todo案例 1.Vuex概述 Vuex是实现组件全局...

  • 通过一个简单实例了解vuex

    简单说明 什么是vuex,vuex怎么使用,什么场景下适合使用vuex, vuex 文档中都有介绍。看完文档之后,...

  • VUE嵌套路由 component属性key的作用

    背景 首先我们的项目是需要Vue多层嵌套路由的,即router-view中使用的页面还会有router-view。...

  • <router-view :key=“key“/>中key的作用

    router-view 中key作用, 你可以 router-view 当做是一个容器,它渲染的组件是你使用 vu...

  • VueX--VUE核心插件

    使用VueX方法 1.安装vuex模块 npm install vuex --save 2.作为插件使用 Vue....

  • vuex@2.x 文档

    1、https://vuex.vuejs.org/zh-cn/2、vuex 使用文档3、vuex2.0 基本使用(...

网友评论

      本文标题:善用router-view 减少vuex的使用

      本文链接:https://www.haomeiwen.com/subject/tszysqtx.html