首先介绍一下什么是组件
组件可以扩展HTML元素，封装可重用的代码。
组件是自定义元素，VueJS的编译器为它添加特殊功能。
组件也可以是原生HTML元素形式，以is特性扩展。
如何使用组件
这里我先介绍两种注册组件的方法
全局注册(所谓全局注册就是使用Vue的静态注册)
Vue.component('my-component',{
template:'
我是全局注册
'});
new Vue({
el:"#app",
});
局部注册(需要写在实例中的components属性中)
var vm = new Vue({
el:'#app',
components:{
'my-component':{
template：'
我是局部注册
'}
}
});
new Vue({
el:"#app",
});
组件中的data
data必须是函数
如果不是函数，每个组件共享一个数据，会相互影响
当使用函数的时候，把数据返回，每个组件都有自己的数据
Vue.component('my-component',{
template:'
{{ name }}
'data(){
return{
name:'luoxue'
}
}
})
组件的构成
组件意味着协同工作，通常父子组件会是这样的关系：组件 A 在它的模版中使用了组件 B 。它们之间必然需要相互通信：父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。然而，在一个良好定义的接口中尽可能将父子组件解耦是很重要的。这保证了每个组件可以在相对隔离的环境中书写和理解，也大幅提高了组件的可维护性和可重用性。
在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。
prop 是父组件用来传递数据的一个自定义属性。子组件需要显式地用 props 选项声明 “prop”：
组件中的props属性
由于组件中的data是一个函数，拥有自己的作用域，所以不能直接传值，我们就需要用props属性来进行数据的传递。也就是说，组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。
//传入普通字符串
Vue.component('child',{
// 声明props
props:['message'],
// 就像 data 一样，prop 可以用在模板内
// 同样也可以在 vm 实例中像 “this.message” 这样使用
template: '{{ message }}'
})
new Vue({
el:"#app",
})
camelCase vs. kebab-case
HTML 特性不区分大小写。当使用非字符串模版时，prop的名字形式会从 camelCase 转为 kebab-case(短横线隔开)：
Vue.component('child', {
// camelCase in JavaScript
props: ['myMessage'],
template: '{{ myMessage }}'
})
再次说明，如果你使用字符串模版，不用在意这些限制。
动态Prop
类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：
html代码
js代码
Vue.component('child',{
// 声明props
props:['myMessage'],
// 就像 data 一样，prop 可以用在模板内
// 同样也可以在 vm 实例中像 “this.message” 这样使用
template: '{{ myMessage }}'
})
new Vue({
el:"#app",
data:{
name:"luoxue"
}
})
字面量语法 VS 动态语法
html:如果在为vue组件prop定义或者赋值的时候用了“v-bind:”的动态语法，则会先将其转化为js表达式，然后计算结果赋值，下面示例中，第一个传递的是字符串，第二个传递的是1+2即3的数值
#字面量语法 VS 动态语法
//字面量语法 VS 动态语法
Vue.component("child", {
props: ["myMessage"],
template: "
});
var vm = new Vue({
el: "#app",
});
单项数据流
prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。
另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop 。如果你这么做了，Vue 会在控制台给出警告。
通常有两种改变 prop 的情况：
prop 作为初始值传入，子组件之后只是将它的初始值作为本地数据的初始值使用；
prop 作为需要被转变的原始值传入。
单项数据流 VS 双向数据流
Prop类型绑定(单向、双向)
//Prop类型绑定
Vue.component("child05", {
props: ["myMessage05"],
template: ''
});
var dr05 = new Vue({
el: "#dr05",
data: {
name: "DarkRanger",
}
});
Prop验证(转)
组件可以为 props 指定验证要求。如果未指定验证要求，Vue 会发出警告。当组件给其他人使用时这很有用。
prop 是一个对象而不是字符串数组时，它包含验证要求：
#Prop验证
name:{{dr.name}}, age:{{dr.age}}.
//Prop验证
Vue.component("child06", {
props: {
//基础类型检测("null"意思是任何类型都可以)
msg_null: null,
//String类型，必须是定义过的，可以是空字符串""
msg_string: {
type: String,
required: true,
},
//Number类型，默认值100
msg_number: {
type: Number,
default: 100,
},
//Object类型，返回值必须是js对象
msg_obj: {
type: Object,
default: function() {
return {
name: "DarkRanger",
age: "18",
}
}
},
//指定这个prop为双向绑定
//如果绑定类型不对将抛出一条警告
msg_twoway: {
type: String,
twoWay: true,
},
//自定义验证，必须是Number类型，验证规则：大于0
msg_validate: {
type: Number,
validator: function(val) {
return val > 0;
}
},
//将值转为String类型
//在设置值之前转换值(1.0.12+)
msg_number2string: {
coerce: function(val) {
return val + ""
}
},
//js对象转JSON字符串
msg_obj2json: {
coerce: function(obj) {
return JSON.stringify(obj);
}
},
//JSON转js对象
msg_json2obj: {
coerce: function(val) {
return JSON.parse(val);
}
},
},
template: '
+ '
+ '
+ '
+ '
+ '
+ '
+ '
+'
});
var dr06 = new Vue({
el: "#dr06",
data: {
telphone: "0356-1234567",
mobilephone: 15912345678,
dr: {
name: "DarkRanger",
age: 25
},
drJson: '{"name":"DarkRanger","age":25}',
}
})
动态组件的tab切换
动态组件
- {{tab01Text}}
- {{tab02Text}}
- {{tab03Text}}
//扩展组件tab01
var tab01 = Vue.extend({
template: "#temp-tab01",
});
//扩展组件tab02
var tab02 = Vue.extend({
template: "#temp-tab02",
});
//扩展组件tab03
var tab03 = Vue.extend({
template: "#temp-tab03",
});
//新建vue实例
var dr01 = new Vue({
el: "#dr01",
data: {
tab01Text: "tab01", //导航栏文本1
tab02Text: "tab02", //导航栏文本2
tab03Text: "tab03", //导航栏文本3
currentView: 'tab01', //默认选中的导航栏
},
//局部注册组件
components: {
tab01: tab01,
tab02: tab02,
tab03: tab03,
},
methods: {
//绑定tab的切换事件
toggleTabs: function(tabText) {
this.currentView = tabText;
}
}
});
使用slot分发内容
单个slot
除非子组件模板包含至少一个 插口，否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的 slot 时，父组件整个内容片段将插入到 slot 所在的 DOM 位置，并替换掉 slot 标签本身。
最初在 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。
#单个slot
如果没有分发内容，这里将会被显示
//单个slot
var child01 = Vue.extend({
template: "#child01",
});
var dr01 = new Vue({
el: "#dr01",
components: {
"child01": child01
}
});
具名slot
元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素。
仍然可以有一个匿名 slot ，它是默认 slot ，作为找不到匹配的内容片段的备用插槽。如果没有默认的 slot ，这些找不到匹配的内容片段将被抛弃。
#具名Slot(有名称的slot)
//具名slot
var child02 = Vue.extend({
template: "#child02"
});
var dr02 = new Vue({
el: "#dr02",
components: {
"child02": child02
}
});
编译作用域
作用域插槽是一种特殊类型的插槽，用作使用一个(能够传递数据到)可重用模板替换已渲染元素。
当组件中拥有了slot插口的时候，组件内的内容片断都将替换掉slot
在子组件中，只需将数据传递到插槽，就像你将 prop 传递给组件一样：
804
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
