父-子通讯

parent.vue

  1. <template>
  2.     <div>
  3.         <child attr1="msg" v-bind:attr2="msg">this is header</child>
  4.     </div>
  5. </template>
  7. <script>
  8. import Child from "./child";
  10. export default {
  11.     name: 'Header',
  12.   data(){
  13.       return {
  14.         msg:"12323"
  15.     }
  16.   },
  17.   components:{
  18.       Child
  19.   }
  20. };
  21. </script>

child.vue

  1. <template>
  2.     <div>
  4.     </div>
  5. </template>
  7. <script>
  8.   export default {
  9.     name: 'Header',
  10.       props: [],
  11.     props:{
  12.       attr1: {
  13.             type: Boolean,
  14.             require: true
  15.         }
  16.     }
  17. };
  18. </script>
  • 动态传参

  • 静态传参

    子-父通讯

  • 方案一

    • 子组件 this.$emit(‘eventname’,’data…..’)
    • 父组件 v-on 来监听子组件的事件，通过回调函数获得参数

  • 方案二

    • 父组件向组件，传递一个函数
    • 子组件调用父组件的函数，并传入参数
    • 父组件在声明函数的位置，就可以获得对应的参数

      父组件调用子组件函数

  • ref 获得子组件实例，调用函数即可

  • ref 获得子组件实例，通过实例派发一个事件发射器，子组件监听派发事件，触发函数

    同级组件通讯

  • EventBus&EventHub

    跨级组件通讯

  • provoder inject

  • $attrs $listener

    Vuex

  • strict 严格模式

  • state 共享状态
  • getters 共享状态的计算属性，可以对state的数据进行二次处理
  • mutations 修改状态的唯一途径，就是提交mutation
  • actions 变更vuex状态之前的，异步操作
  • modules 模块化状态管理
  • namespace 设置模块化的命名空间