vue组件和小程序组件

组件

组件注册

1. 组件名

vue.component('my-component-name',{})

• 规范 ：kebeb-case（必须小写，必须有一个短横线）。
• 当注册的时候使用驼峰（且首字母大写），在html使用时也应该用kebeb-case

2. 全局注册

vue.component('my-component-name',{})

• 功能 ： 可以在vue的根中随意使用，相当于全局变量，全局中都有定义域.

3. 局部注册

var componentA = {'.....'};
var componentB = {'.....'};
new vue({
    components : {
        'component-a' : componentA,
        'component-b' : componentB
    }
});

• 功能 ： 在vue根中创造两个节点，互相不可使用

---

父子组件

Vue.component('kebeb-case',
{template : '<input/>'})

在上例中 ： kebeb-case这个组件其实是有子组件的，就是input

---

Prop

1. Prop的大小写

• 在Prop中用驼峰命名不能用kebeb-case，但是在html中不敏感大小写，只能用对应的kebeb-case。

2. Prop类型

• 使用对象形式规定Prop字段传入类型

  Prop : {
    name : String,
    id : Number
  }  // 规定类型 ： 使用对象形式
  Prop : ['name','id']
  

3. 传递静态或动态Prop

• Prop传值，需要v-bind来转义字符串。
• 传入数字 ： 需要v-bind
• 传入布尔值 ： 需要v-bind
• 传入数组 ： v-bind ： ids = “[234,123,123]”
• 传入对象所有属性： 直接赋值满Prop，所以使用单个v-bind
• 综上 ： 除了字符串都需要v-bind进行转义

4. 单向数据流

• 理解 ： Prop中的数据，只能从外面来，改变组件内部的数据，而组件中的各种方法，都无法改变Prop的外来传值，子组件无权改变父组件中传入prop的值
• 需求情况的解决 ：
  • 组件内的数据需要Prop传入的值当作初始值： 建议在data中申请属于自己的本地属性。
  • Prop值传入需要进行转换 ： 使用计算属性
• $emit(‘action’,'参数1’，‘参数2’) – 携带数据

5. Prop验证

• 同规定Prop属性

• 可以用对象形式，添加一个default

  prop ： {
  name : String,
  default : "yzh"
  }
  // 可用
  String
  Number
  Boolean
  Array
  Object
  Date
  Function
  Symbol
  

6. 非Prop的属性

• 是属于子组件的特定属性 ： 比如input有type属性

---

自定义事件

自定义事件 ： javascript中定义的事件用v-on绑定

1. 事件名

• 始终建议使用kebeb-case

2. 自定义组件的v-model

• v-model会默认利用 ‘value’的prop，和名为’input‘的事件 ，而复选框中，可能需要绑定“checked"这个状态，故需要更改prop。

  model : {
  prop : 'checked',
  event : 'change'
  }   // 用来改变v-model的使用机制
  props : {
  checked : Boolean
  }  // 需要在props里面声明
  

  需要注意的点

  • v-model的变量需要定义
  • v-model触发的在父组件中是语法糖@input = “text = $event.target.value” ($event是事件，$event.target是事件的触发者)

---

插槽

<my-component>slot content</my-component>

Vue.component('my-component',{
template : '<p>
    <slot></slot>
</p>'
})

如上，'slot content’将会加载在组件中slot位置

1. 插槽内容

• 插槽的内容可以是 ： 文字，图片，链接，HTML，其他组件
• 如果没有插槽，自定义组件中的文字将会被抛弃

2. 编译作用域

• 父组件内容在父级作用域编译，子组件内容在子级作用域编译

• 在父组件中无法使用父组件传递给子组件的值

  <my-link url = "\asd">{{url}}</my-link>
  
  这个不被允许
  

3. 后备内容

• 默认的插槽内容

  <slot>default</slot>
  

4. 具名插槽

• slot有name标签，用来渲染多个分类的插槽内容

  <slot name = "footer"></slot>
  html : 
  <template v-slot : "footer"></template>
  注意这里是个 ： 不是 = 
  

• 使用template提供插槽内容，没有v-slot的内容被分发给没有具名的slot

• 缩写 ：

  <template #footer>123</template>
  用#在html中使用，对应name
  

4. 作用域插槽

• 当你的父级想使用子组件中的数据 （data对象）时应该使用这个作用域插槽

  组件中：
  把东西加在插槽自己的属性上（插槽prop传输插槽）---扩充作用域
  <slot v-bind:atr = "atr"></slot>
  
  给插槽prop在父级渲染，所以可以在父级使用
  结合    // 这里拿到传来的prop直接给个名字
  // 配合default属性可以达到目的
  
  <template v-slot：default=“propName”>
  {{propname.atr.obj}}</template>
  

• 独占默认插槽的缩写语法 ：

  <my-component v-slot="propName"></my-component>
  
  需要注意：若有多个具名插槽，则不能使用这个，会让作用域变混
  

• 解构插槽prop(了解得了)

  <my-component v-slot"{user}"></my-component>
  <my-component v-slot = "{user : person}"></my-component>
  

---

动态组件和异步组件

• 动态组件

我们可以通过component标签 + is选择来绑定一个组件

<component v-bind : is = ""></component>
使用v-bind来绑定动态数据，从而绑定一个动态组件

组件切换将以重新建立的模式
# 如果我想保持原来组件的数据状态
使用keep-alive标签
<keep-alive>
    <template v-bind:is = "my-component"></template>
</keep-alive>

• 异步组件（放着，不急）

小程序的组件

1. 组件的创建

   1. 创一个文件夹装components，再来个文件夹

2. 组件的引用

   在页面json中的{

   “component” : “componentPath”,

   }

3. 组件间的数据传递

   properties : {

   aaa : {

   type : String ,

   value : “默认的值”

   }

   }

4. 子组件激发父组件事件

   1. 给父组件创建一个事件

      this.triggerEvent("","参数”)

5. 组件的插槽，一模一样

6. 组件其他常用知识

   observer

   组件生命周期函数