vue笔记之：组件化编码

组件定义与使用

vue 文件的组成（3个部分）

1. 模板页面

   <template>
       页面模板
   </template>
   

2. JS 模块对象

   <script>
       export default {
           data(){return {};},
           methods:{},
           computed:{},
           components:{}
       }
   </script>
   

3. 样式

   <style>
       样式定义
   </style>
   

基本使用

1. 引入组件
2. 映射成标签
3. 使用组件标签
4. 参考代码

<template> 
    <!--使用组件标签-->
  <HelloWorld></HelloWorld> 
  <hello-world></hello-world> 
</template> 

<script> 
    // 1. 引入组件
  import HelloWorldfrom'./components/HelloWorld' 

  export default { 
    // 2. 映射成标签
     components:{ 
       HelloWorld 
     } 
  } 

</script> 

关于标签名与标签属性名书写问题

1. 写法一：一模一样
2. 写法二：大写变小写，并用-连接

组件间通信

基本原则

1. 不要在子组件中直接修改父组件的状态数据
2. 数据在哪，更新数据的行为（函数）就应该定义在哪。

vue 组件间通信方式

1. props
2. vue的自定义事件
3. 消息订阅与发布（如：PubSubJS 库）
4. slot
5. vuex

组件间通信 props

1. 使用组件标签时：

<myComponent :name="'tom" :age="3" :setName="setName" />

2. 定义 MyComponent 组件时，在组件内声明所有的 props
   • 方式一： 只指定名称

     props:['name','age','setName']
     

   • 方式二：指定名称和类型

     props:{
        name:String,
        age:Number,
        setName:Function
     }
     

   • 方式三：指定名称/类型/必要性/默认值

     props:{
         name:{type:String,required:true,default:xxx},
     }
     

3. 注意：
   • 此方法用于父组件向子组件传递数据
   • 所有标签属性都会成为组件对象的属性，模板页面可以直接引用。
   • 问题：
     • 如果需要向非子后代传递数据必须多层逐层传递
     • 兄弟组件间也不能直接 props通信，必须借助父组件才可以。

组件间通信：vue自定义事件

1. 在父组件中绑定事件监听：
   • 方式一： 通过 v-on绑定 如：@delete_todo= "deleteTodo"
   • 方式二： 通过 $on()

     this.$refs.xxx.$on('delete_todo',(todo)=>{
         this.deleteTodo(todo)
     });
     

2. 在子组件中触发事件：this.$emit(eventName,data)
3. 注意：
   • 此方式只用于子组件向父组件发送数据
   • 问题：隔代组件或兄弟组件间通信用此种方式不合适

组件间通信：消息订阅与发布（PubSubJS库）

1. 安装：npm install pubsub-js --save
2. 订阅消息 PubSub.subscribe('msg',function(msg,data){} )
3. 发布消息 PubSub.publish('msg',data)
4. 此方式可实现任意关系组件间通信（数据）
5. 事件的两个重要操作
   • 绑定事件监听（订阅消息）
     • 目标：标签元素
     • 事件名（类型）
     • 回调函数
   • 触发事件（发布消息）
     • DOM 事件：用户在浏览器上对应的界面上做对应的操作
     • 自定义：编码手动触发。

组件间通信 slot

1. 此方式用于父组件向子组件传递’标签数据’
2. 子组件：Child.vue

   <template>
       <div>
           <slot name="xxx">不确定的标签结构 1</slot>
           <div>组件确定的标签结构</div>
           <slot name="yyy">不确定的标签结构 2</slot>
       </div>
   </template>
   

3. 父组件

<child>
    <template v-slot:xxx>xxx 对应的标签结构</template>
    <template v-slot:yyy>yyy 对应的标签结构</template>
</child>