vue组件化编程

vue文件包含3个部分vue

      

  <template>

      <div></div>

  </template>

  <script>

    export default {

       props: []/{}

          data(){},

        computed: {}

          methods: {},

       watch: {}

        filters: {}

          directives: {}

          components: {}

     }

 </script>

 <style>

 </style>

    组件化编码的基本流程vuex

    1). 拆分界面, 抽取组件函数

    2). 编写静态组件组件化

    3). 编写动态组件编码

        初始化数据, 动态显示初始化界面spa

        实现与用户交互功能code

    组件通讯的5种方式component

    propsblog

    vue的自定义事件事件

    pubsub第三方库

    slot

    vuex(查看vuex核心概念)

    props:

        父子组件间通讯的基本方式

        属性值的2大类型: 

            通常: 父组件-->子组件

            函数: 子组件-->父组件

隔层组件间传递: 必须逐层传递(麻烦)

兄弟组件间: 必须借助父组件(麻烦)

vue自定义事件

    子组件与父组件的通讯方式

    用来取代function props

    不适合隔层组件和兄弟组件间的通讯

pubsub第三方库(消息订阅与发布)

    适合于任何关系的组件间通讯

slot

    通讯是带数据的标签

    注意: 标签是在父组件中解析

vuex

    多组件共享状态(数据的管理)

    组件间的关系也没有限制

    功能比pubsub强大, 更适用于vue项目

相关文章
相关标签/搜索