1.组件
全局组件注册、局部组件注册、父子双向传递值、动态组件、slot内容分发、data、$refs
(1)配置子组件
components:{ "my-component3":{ template:"<h3>这是子组件</h3>" } }
var myComponent4 = Vue.extend({
template :`<h4> 第四个组件{{msg}} <h4>`
})
(2)在vue中组件的作用域是隔离的，如果想要在子组件中访问父级的数据，则需要父级显式的向下传递
为了解决地址传递的问题，在组件中声明data必须为函数
且返回一个新对象，这样每个组件用到的data是一块新的内存地址，组件间互不影响
return {
num:0
}
}```
`data:{ num:0 }`
如果需要获取dom元素，可将元素以 ref ="name" 进行标识
通过this.$refs.name 得到对应的name的dom,尽量少用
` this.$refs.mi.focus();`
（3）组件动态切换
通过component声明动态组件，绑定is决定渲染哪个子组件，is所绑定的值，必须在component中主页
通过keep-alive标签包裹 component 标签，使组件保留在内存中，重新切换时，将不再重新渲染
在1.x版本中，keep-alive是component的一个属性<component keep-alive></component>
<button @click="currentView='home'"> 首页 </button>
<button @click="currentView='cart'"> 购物车 </button>
<button @click="currentView='mine'"> 个人中心 </button>
<keep-alive>
<component :is="currentView"></component>
</keep-alive>
var vm = new Vue({
el: ".box",
data: {
currentView : "home"
},
components: {
home : {
template : <h1>首页{{d}}</h1>,
data :function(){
return {
d:new Date().getTime()
}
}
},
cart : {
template : <h1>购物车</h1>
},
mine : {
template : <h1>个人中心</h1>
}
},
methods:{
}
})
(4)slot
`<slot></slot>`插槽（内容分发）
有name属性的标签叫 具名插槽 `<slot name='a'></slot>`
没有name属性的标签叫 匿名插槽
在组件渲染模板时，会抛弃标签内的原始内容，为了保留原始内容，可以在 模板 内通过 slot 标签预留插槽位
原始内容（不含slot属性的）会默认放到匿名的插槽内
含有slot属性的，会去查找对应的插槽，未找到，将抛弃内容