Vue使用笔记

1，组件名称与Prop命名有规则限制

2，组件里的子组件，有且只能有一个父级DOM包裹，new一个Vue实例时最好使用id作为el的参数（el后的参数要保持唯一性）

3，声明一个组件时，inheritAttrs: false属性是阻止父组件的属性传给子组件（未用到的）

//父组件

子组件为Vue.component（template:``）对应template声明的dom。

$attrs属性，将子组件未用到的父组件的属性传到制定的子组件（子组件未用到的父组件的属性），

下面示例中的 v-bind="$attrs" //就是将父组件中placeholder="Enter your username"属性传给input

Vue.component('base-input', {

inheritAttrs:false,//阻止父组件中的属性值传到子组件

props: ['label','value'],

template:`

      {{ label }}

        v-bind="$attrs" 

        v-bind:value="value"  

        v-on:input="$emit('input', $event.target.value)"

      >

  `

})

4,v-model的双向数据绑定，用在组件上时modal属性添加prop（对应v-model绑定的值）和event属性（原生DOM所有的事件change,input,focus等等），对于prop对应的数据，要在组件的props属性中声明

Vue.component('base-checkbox', {

  model: {

    prop:'checked',

    event:'change'

  },

  props: {

    checked:Boolean

  },

template:`

      type="checkbox"

      v-bind:checked="checked"

      v-on:change="$emit('change', $event.target.checked)"

    >

  `

})

prop对应的数据对应的类型有：

String， Number， Boolean， Array， Object， Date， Function ，Symbol

5,is的使用场景：

（1）：在标签内部使用，

只要改变currentTabComponent的值就能实现不同组件的切换，详情看这里。

currentTabComponent:可以为组件名或一个组件的选项对象。

（2）：类似 table，ul，ol，select等对内部元素有限制的，如果组件内部元素是父级组件所限制的，那么解析时就会异常。

类似：

//被作为无效的内容，提升到外部

使用 is 解决此问题

    

6，插槽slot

标签通过name属性来区分彼此，父组件通过设置 slot=“name”来对应值应该放到哪里，

在父组件中：或者

  //可以使用template标签也可以直接在普通元素上添加slot属性。

子组件中：// 上面slot="onecomp" 内部的元素就会替代标签

slot-scope能将slot上绑定的数据传到父级组件：

    

子组件内：

Vue.component("todo-list",{

    props:["todos"],

    template:`

    

•    

     

`})

new Vue({

el:"todolist",

data:{

    todos:[{"id":1,"text":"first","isComplete":true},{"id":2,"text":"two","isComplete":true }]

}

})

父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。

个人认为，将插槽的数据传到父组件，建立了子组件与父组件的联系，更加方便进行数据以及dom操作，使组件变得更加灵活。