前言
这文章主要介绍了，组件的基础知识，以及props通信。 由于刚刚接触组件，先不把它写成.vue的文件。
页面拆分为组件（带有名字的Vue实例）
- 模块化
- 复用，重用
组件作用范围
- 全局 (Vue.componet())
- 局部
Vue.componet(id,{});
// id 为组件的名字
// {} 为组件的配置项
组件的属性 data必须为 function且返回对象？??-- 深层次
Vue.component('my-component',{
data(){
return {
// 为组件编写数据
}
}
});
- 组件复用，每个实例都将有一份返回对象的独立拷贝
组件的内容只能有一个根元素, template算不算？
<template>
<div class="root-element">
<!-- write your component code -->
<div>
</div>
</div>
</template>
使用组件的步骤
- 定义组件
- 在使用的地方注册该组件（你总得告诉人家吧！！）
- 用就是了！（自定义元素的来用）
组件的命名方式
kebab-case 就是一个单词加一个横线然后再加个单词这样的组成(单词之间用横线隔开)
浏览器解析不支持大写字母，解析的时候全部会转为小写
像这样的会不会？
my-counter
my-list
your-list-item
kebab-case: 单词中间横线合开
PascalCase: 单词首字母大写
别玩花样，就用横线隔开那种命名方式！
很推荐没有内容的组件作为闭合元素来使用
<my-button />
vue.js:634 [Vue warn]: Unknown custom element: <button-counter> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in <Root>)
对于 components来说，每个属性的名字就是自定义元素的名字
Vue.extend()函数啥意思？还没整明白！后面谈！
组件的通信
- 使用props向子组件传递数据
组件当做自定义元素使用 => 借用元素的属性来通信()。
在组件中定义props数组：
props:['postTitle']要想传递多个值就定义多个prop, 或者传递对象将要传递的值封装咋对象中
<body>
<div id="app">
<post-item post-title="Vue.js很强！" />
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
// 定义全局组件
Vue.component('post-item', {
// 使用props属性数组来接受父组件传递的值
props: ['postTitle'],
template: `<h3>{{postTitle}}</h3>`
});
const app = new Vue({
el: "#app"
});
</script>
</body>
实际业务开发中，子组件通常是以对象来接受数据
<body>
<div id="app">
<post-list />
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
Vue.component('post-item', {
props: ['post'],
template: `
<div>
<h3>{{post.title}}</h3>
<p>{{post.author}}</p>
<p>{{post.content}}</p>
</div>
`
});
Vue.component('post-list', {
data() {
return {
// 将多个值封装在对象post中
post: {
author: "刘博文",
title: "Vue.js深入浅出",
content: "这本书很牛逼！"
}
}
},
template: `<div><post-item :post='post'/></div>`
})
const app = new Vue({
el: "#app",
});
</script>
</body>
props传递值的特点
- 单向传递数据，只能向被引用的一方传递数据。
- 数组和对象传递引用，子组件去更改数据会影响父组件的状态
组件的props验证机制（就是可以来验证传递过来的数据是否符合要求,而这个要求可以你来定义！）
Vue.component({
props:{
name:{
type:string,
required:true
},
age:Number
}
});
参考
- 《Vue.js从入门到实战》孙鑫