Vue 学习笔记 03——组件篇

Vue 学习笔记 01——iview

Vue 学习笔记 02

Vue 学习笔记 03——组件篇

Vue 学习笔记 04——TabPanel

Vue 学习笔记 05——状态管理Vuex

===================================正文分割线==================================

1.组件基础

需要注意一下几点：

a）组件中的 data 是一个函数，便于组件的复用；

b）每个组件必须只有一个根元素；

c）父组件通过 prop 向子组件传递数据；

d）子组件通过 $emit 向父组件返回事件及值；

2.prop使用

a）注意大小写的使用，在 js 中的 prop 若使用的是驼峰命名，在html模板中，则应该改成短横线分隔命名；

     

b）prop 需要定义类型，如果是布尔值，最好加个默认值；

multiple:{
    type:Boolean,
    default:false
}

c）prop 赋值

     除了可以动态赋值，也可以静态赋值。当静态赋值时需要注意以下几种情况：

     1）当静态值为字符串时不需要加 v-bind ；

     2）当静态值为数值、布尔、数组、对象的时候，都需要用 v-bind : prop-name 来告诉 Vue，这是一个 JavaScript 表达式而             不是一个字符串。

     3）可以给 prop 传入一个对象的所有属性，需要使用不带参数的 v-bind  (取代 v-bind : prop-name)。

           

3.自定义组件数据绑定（v-model或 update:value-name）

a）第一种通过 v-model：定义组件时使用 model 选项来绑定 value，使用组件时用 v-model 来绑定；

       

b）第二种使用 update:value-name：

      1）定义组件时，在监听的方法中，使用 $emit 结合update方法来更新返回值，

            

        

       2）使用时，使用  v-bind:value-name.sync="value"  来更新数据        

            

4.监听数据变化 

     当父组件传给子组件props中的value值改变时，触发子组件上的on-change事件