zoukankan      html  css  js  c++  java
  • vue之组件通信

    父子组件之间通讯:

    1.父组件绑定自定义属性(:nav='navval'),属性值为携带父组件中声明的属性(data 中navval:'aini')

    2.子组件接收用props,可以是数组可以是对象,一般是对象可以定义类型,例如字符串类型如果不符合是会被警告的

    3.在子组件上用默认active的值为父组件的自定义属性

    4.父组件绑定自定义事件,触发一个方法,方法内部接受传过来的值

    5.子组件中绑定一个方法,方法内部用this.$emit("父组件自定义的事件名",携带的参 数(子组件data中需要声明))

    6.父组件data中声明一个变量用来在父组件自定义事件触发的方法中接受传过来的参数

    其他组件之间的通讯(eventbus和vuex):

    1.新建js文件,创建vue实例,导出(也可以在main.js中添加原型链)

    例如:

    Vue.prototype.$bus= new Vue({
      data(){
        return{
          nickname:'aini'
        }
      }
    })

    2.在需要使用的组件中引入该js文件,现在可以在created中注册bus了,有一个$on的方法可以监听事件,第一个属性为自定义方法名字,第二个参数为方法,可以携带参数

    3.在执行完自己想要的操作后,在另一个组件用bus.$emit来触发,第一个参数为相同的自定义方法名,第二个参数为想要传的值(参数)

    在很多组件都需要的这个的时候会很繁琐,建议使用vuex 

    vuex:(小项目不建议使用,繁琐冗余)

    1.在入口文件中引入store并在vue中进行初始化注册

    2.在state中定义一个初始化变量,mutations中定义方法可以携带参数,方法内部可以为      state.变量名 = 值 ;

    3.在组件中可以直接进行this.$store.state.变量名 取得值

    想改变这个值需要在组件的方法中进行调用this.$store.commit(‘mutations中的方法名’,携带的参数名字)

    (这样写可以会有点繁琐,vuex为我们提供了更为简单的方式来满足以上效果)

    在组件中script标签中写上(还有mapGetter和mapMutations等等)         import {mapState} from 'vuex' (解构赋值)

    在组件的计算属性computed中写上(展开运算符)
    ...mapState(['state中定义的属性'])

    在methods中用...mapMutations(['mutations中定义的方法']),然后在需要的地方进行
    this.方法名进行调用,方法中可以携带参数


    actions中可以写异步函数,
    在组件中需要调用需要写this.$store.dispatch('异步函数名字',参数名)
    同样的也有相应的映射函数,执行同上

    getters,类似计算属性,里面可以写为
    state中定义的数组(state){
    return state.数组.属性
    }
    也有相应的映射函数,写在计算属性中

    本文仅提供参考,是本人闲时所写笔记,如有错误,还请赐教,作者:阿蒙不萌,大家可以随意转载

  • 相关阅读:
    Docker容器常用操作命令(镜像的上传、下载、导入、导出、创建、删除、修改、启动等)详解
    [20191213]toad 12下BIND_AWARE提示无效.txt
    [20191206]隐含参数_db_always_check_system_ts.txt
    [20191127]表 full Hash Value的计算.txt
    [20191127]探究等待事件的本源4.txt
    [20191126]探究等待事件的本源2.txt
    [20191125]oracel SQL parsing function qcplgte 2.txt
    [20191125]探究等待事件的本源.txt
    [20191122]oracel SQL parsing function qcplgte.txt
    [20191119]探究ipcs命令输出2.txt
  • 原文地址:https://www.cnblogs.com/huchong-bk/p/11871823.html
Copyright © 2011-2022 走看看