码迷,mamicode.com
首页 > Web开发 > 详细

Vue.js 组件笔记

时间:2016-08-02 07:46:51      阅读:782      评论:0      收藏:0      [点我收藏+]

标签:

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 内容插槽

 

Vue.js 组件笔记

标签:

原文地址:http://www.cnblogs.com/xiaxiaxia/p/5727900.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!