vue2.0传值方法的归纳

使用vue2.0做过几个项目,传值,最初只会emit的方法,导致整个项目都是emit,而且项目没有合理的划分,有些写成父子形式,传递是很方便的,而且整个项目逻辑也很清晰。

1.同辈组件传值,使用emit和on



    
        
        
    
    
        

在这里我注册了两个同等级的组件,传值时候需要在全局的情况下,不能用this.$emit,所以我在这里var了一个全局的vue。
如果是在vue+webpack的架构下传值,一般我会先写一个eventBus.js,new一个全局的vue

import Vue from 'vue'
export default new Vue;

传值的时候,在需要使用的组件下导入

import bus from 'assets/eventBus';

使用方法:

bus.$emit("res",'我收到啦');
bus.$on('res',function(data){
          that.getData=data;
})

2.父子间传递,使用props



    
        
        
    
    
        

如果你想写一个点击事件,点击父然后传递给子元素,我觉得你可以在子元素写一个监听事件,监听值的实时变化

 Vue.component('v-hello',{
            template: '#vHello',
            props:['name'],
             data(){
                return{
                    getData:'无'
                }
            },
            watch:{
                 name(){
                      return this.name;
                 }
            },
            mounted(){
                var that =this;
                that.getData=that.name;
            }
        });

要注意的是,props是父传递给子,子传递给父的时候得使用第一种emit的方法传递。

3.使用路由传递值(底下这个例子是在vue+webpack的架构下传值的方法)

3.1params传值

第一步:路由配置:这种写法是需要在url显示,:name就是要传递的参数


router.png

第二步:父组件:这里我需要的数据比较多,所以通过params传递的值多,但是显示在url的只有name


index.png

如果不写router-link,点击跳转传值这里也可以这么写
this.$router.push({
         name: `video`,
         params:{
              name:name
         }
})

第三步:子组件


child.png

3.2query传值

注意:query传递的参数会显示在url后面?name=
路由配置

{
      path: '/shipin',
      name:'shipin',
      component: shipin,
      children:[
        {name:'shipin',path:'/shipin',component:mainVideo},
        {name:'video',path:'/shipin/video',component:singleVideo}
      ]
    },

父组件

this.$router.push({
         name: `video`,
         query:{
              name:name
         }
})

子组件

this.$route.query

4.使用vuex传值

犹豫平时做的项目的类别,基本没有用过vuex,个人认为vuex比较适合大型复杂的项目,多个组件之间传递状态,组件之类,例如登录,购物车等功能就挺适合的,有啥问题请多提出,这里不熟,先简单的说一下,后面等总结好了,再归纳
接下来这个例子我说一个简答的Loading功能:
建立一个vuex文件夹,里面包括的文件有


image.png

在main.js引用

import store from './vuex/store'
new Vue({
  el: '#app',
  router,
  store,
  template: '',
})

state.js Vuex store 实例的根 state 对象,这里当做state的最初对象

export default {
  // 页面是否在加载中
  isLoading: true
}

getters.js 这里我就当做获取loading状态

export default {
  // 得到是否加载中
  getloading: (state) => state.isLoading,
}

mutations.js 改变状态,处理数据,这里就是改变loading的状态

export default {
  // 设置是否在加载
  SET_LOADING (state, platform) {
    state.isLoading = platform
  },
}

actions.js 异步处理,通过mutations改变状态

export default {
  // 改变是否正在加载状态
  setLoading ({commit}, platform) {
    commit('SET_LOADING', platform)
  },
}

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import getters from './getters'
import actions from './actions'
Vue.use(Vuex)
export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions
})

把loading放在主页,app.vue,项目打开的时候出现Loading



当页面加载完成之后,关闭loading

this.$store.dispatch('setLoading', false)

总结:后面的写的不咋地,以后会慢慢修改的,谢谢

你可能感兴趣的:(vue2.0传值方法的归纳)