Vue.js 组件笔记

Vue 组件总结笔记

一、 创建组件

1. 使用组件三部曲 ( 创建, 注册, 使用 )

2. 全局组件：Vue.component('tag', {}); 

3. 局部组件: components 属性进行注册

二、注册组件的方式

方式一：全局注册

// 可以在任何实例下使用
Vue.component('my-component', {
    template: '#mycomponent',
})

方式二：局部注册

// 局部注册,只能在 #app 下面使用
new Vue({
   el: '#app',
   components: {
        'child-component': {
             template: '#child-component'
     }
   }
})

三、 创建组件的标签

　　 可以使用 template 或者 script 标签

四、定义组件时 data 和 el 必须使用函数

五、组件实例作用域是孤立的，不能在子组件内直接引用父组件的数据，可用使用 props 把数据传给子组件。

六、在父组件中使用子组件，通过以下语法将数据传递给子组件

     

<my-component v-bind:子组件props = "父组件属性"></my-component>

七、props 有三种绑定类型

     1. 单项绑定： (vue 默认绑定) 修改父组件的数据会影响子组件数据，修改子组件数据不会影响父组件数据。

     2. 双向绑定： sync 修改父组件影响子组件数据，修改子组件数据影响父组件。

     3. 单次绑定： once 个人顾各人，父组件修改不影响子，子修改不影响父。

八、slot 内容插槽