组件
组件是可复用的vue实例，且带有名字。
1.因为组件为可复用的Vue实例，所以它们与new Vue接收相同的选项，拥有相同的生命周期。
2.复用后的组件相互独立于自己的实例中，属性隔离。
3.组件的data必须指向一个匿名函数
注册组件
1.全局注册：Vue.component
2.局部注册：var ComponentA = {}
3.为何要局部注册？
如果使用webpack这样的构建系统，全局注册的组件意味着即便你已经不再使用一个组件，他仍然会出现在构建结果中，增加用户的js下载成本
使用组件
可以在components选项中定义想要的组件：
new Vue({
el：'#app',
components:{
'component-a':ComponentA
}
})
正式项目使用组件
1.一般项目都会用bable和webpack用来打包（有对应的官方文档）
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default {
components: {
ComponentA,
ComponentC
},
// ...
}
//思想类似于先把文件require进来再使用。
基础组件的引用时机
当然有些基础组件，例如button和icon或者input组件，可以在Vue实例化之前引入，从src/main.js文件里。
prop的意义
可以通过prop向子组件传递数据
<div id="components-demo">
<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>
</div>
js>
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
//一定要实例化Vue，上述的组件才能用到
new Vue({ el: '#components-demo' });
js<
使用v-bind来动态传递prop
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:title="post.title"
></blog-post>
//posts在Vue实例中为data里的一个数据对象
posts:{id:1,title:'a')
组件模板
组件的模板中根元素必须为单个，所以最外面用Vue实例的id元素包裹一下。
<div id="blog-post-demo">
<a>
<b>
</div>
面向对象
1.当要接受的属性过多时，可以抽象出一个对象来接收，在组件里定义对象的属性。
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:post="post"
></blog-post>
//post就是抽象出来的数据对象，在组件中进行template的配置。
Vue.component('blog-post', {
props: ['post'],
template: `
<div class="blog-post">
<h3>{{ post.title }}</h3>
<div v-html="post.content"></div>
</div>
`
})
子组件事件处理
v-on监听器监听子组件事件
//子组件模板绑定click事件，并使用内部方法$emit传递事件名称和参数
v-on:click=$emit('testEvent,1')
//父组件使用v-on绑定自定义事件名，并用$event来接收子组件参数
v-on:testEvent='test-size += $event'//这个$event是子组件的传值
//因为test-size是个动态属性，所以每当子组件触发事件，都会修改这个属性的值，用到这个属性的元素就会随之改变,例如：
<p :style="{ fontSize: test-size + 'em' }"></p>//p标签中的文字大小会随之改变,这里的:是省略了v-bind的写法
v-model自定义事件
v-model的自定义事件有些特殊，需要使用$event.target.value，并且:value=value回传数据
插槽
1.<slot></slot>插槽，在html模板里的文本前加上行内元素，类似ul的圆点。
2.用于标记往哪个具名插槽中插入子组件内容。
3.举例：
<span>abc</span>
使用slot后
ddd<span>abc</span>
//可以在前面插入一段文字
vue文件
.vue 文件是一个自定义的文件类型，用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 <template>、<script> 和 <style>，还允许添加可选的自定义块：
结语
看完这篇文章，相信你已经对Vue有一个大致的了解了，这时就可以去实战使用了。然后用到不了解的地方再去翻阅官方文档。
网友评论