vue 组件通信及vuex

[toc]

router

先说一下路由吧 否则数据不好展示

父组件与子组件之间

一般情况就是四种:
– 父组件传数据到子组件
– 子组件调用父组件函数
– 父组件调用子组件函数
– 子组件数据传到父组件

父类使用子类的html代码:
<send-data @parentsay="parentShow" :name-a="comchild" ref="childsend"></send-data>

父组件传数据到子组件

一般就是是使用这种:+驼峰-名的形式,comchild是父组件的数据,nameA是子组件的数据名 <dao-menu :name-a="comchild"></dao-menu>
子组件通过:props : ['nameA'],即可
如果是没有加 : 就直接是name-a=”string”,这个是不会变成变量的静态渲染

子类调父类函数

通过@+子类函数="父类函数" 子类通过this.$emit(‘子类函数’)即可调用成功

父类调用子类

定义时要使用 rel对子类进行命名, 然后通过var child=this.$refs.子类名; 通过这个变量就可以直接调用子类函数和数据了.

总结一下调用

子类要想访问父类必须要先声明 用:name-a 绑定数据 或者 @ hanshu 绑定函数
父类访问子类就很容易直接rel命名变量即可

代码

// 父类调用
<send-data @parentsay="parentShow" :name-a="comchild" ref="childsend"></send-data>

// 父类数据使用:
props : ['nameA'], // 还可以进行数据的验证,验证父类数据是否符合规范
// 父类调用子类的,可以是数据也可以是函数
childsay:function () {
      //childsend
      var child=this.$refs.childsend;//是上面ref="子类的名称"
      child.msg="父组件改变的"
    }
// 子类调用父类的函数 通过@子类函数名 ="父类函数名"
showwo:function () {
        this.$emit('parentsay')//用的是子类的函数名 这样就可以调用父类了
      }

vuex