VUE 入门基础(8)

十，组件
　使用组件
　　注册
　　　　可以通过以下这种方式创建一个Vue实例
　　　　　　new Vue({
　　　　　　　　　el: '#some-element',
　　　　　　})
　　　　注册一个全局组件，你可以使用Vue.component(tagName,options)
　　　　　　Vue.component('my-component',{  })
　　   在父实例的模块中以自定义元素 <my-component></my-component> 的形式使用
　　　　<div id="example">
　　　　　　<my-component></my-component>
　　　　</div>
　　 // 注册
　　　　Vue.component('my-component', {
　　　　　　template: '<div>A custom component!</div>'
　　　　})
　　 // 创建根实例
　　　　new Vue({
　　　　　　el:'#example'
　　　　})
　渲染为
　　　　<div id="example">
　　　　　　<div>A custom component!</div>
　　　　</div>
　局部注册
　　使用组件实例选项注册，可以使组件仅在另一个实例/组件的作用域中可用
　　　var Child = {
　　 　　template：'<div>A custom component !</div>'
　　}

　　new Vue({
　　　　components: {
　　　　　　'my-component':Child
　　　　}
　　})
　　data 必须是函数
　　　　使用组件时，大多数选项可以被传入到Vue 构造器中，有一个列外,data 必须是函数。
　　　　　　Vue.component('my-component', {
　　　　　　　　template: '<span> {{ message}}</span>',
　　　　　　　　data: {
　　　　　　　　　　message: 'hello'
　　　　　　　　}
　　　　})
　　Vue 会在控制台发出警告，告诉你在组件中 data 必须是一个函数
　　　　var data = { counter:0}
　　　　Vue.component('simple-counter', {
　　　　template: '<button v-on:click="counter += 1">{{ counter }}</button>'，
　　　　　　data： function () {
　　　　　　　　return data
　　　　　　　　}
　　　　})
　　　　new Vue({
　　　　　　el: '#example-2'
　　　　})
　　　　三个组件共享了同一个 data
　　　　　　data: function() {
　　　　　　　　retrun {
　　　　　　　　　　counter: 0
　　　　　　　　}
　　　　　　}
　　构成组件
　　　　Prop
　　　　　　使用Prop传递数据，组件的作用域是孤立的，意味着不能并且不应该再子组件的
　　　　　　模板内引用父组件的数据，可以使用props 把数据传给子组件。

　　　　prop 是父组件用来传递数据的一个自定义属性，子组件需要显示的用props
　　　　　　Vue.component('child', {
　　　　　　　　　　// 声明 props
　　　　　　　　props: ['message'],
　　　　　　　　　　// 像 data 一样 prop 可以用在模板内
　　　　　　　　　　// 同样也可以在 vm 实例中像 “this.message”这样使用
　　　　　　　　templae: '<span>{{ message }}</span>'
　　　　})
　　　　然后向它传入一个普通字符串：
　　　　　　<child message="hello!"></child>
　　　　结果：
　　　　　　hello!
　　camelCase vs.kebab-case
　　　　HTML 特性不区分大小写 当使用非字符串模板的时，prop 的名字形式会从camelCase 转为
　　　　　　kebab-case（短横线隔开）
　　　　　　　　Vue.component('child', {
　　　　　　　　　　props:['myMessage'],
　　　　　　　　　　　　template: '<span>{{ myMessage}}</span>'
　　　　　　　　})

　　　　　　<child my-message="hello"></child>
　　动态Prop
　　　　　　类似用于v-bind 绑定 HTML 特性到一个表达式，也可以用v-bind 动态绑定props的值
　　　　　　到父组件的数据中。没当父组件的数据变化时，该变化也会传导给子组件。
　　　　　　<div>
　　　　　　　　<input v-model="paremtMsg">
　　　　　　　　<child v-bind:my-message="parentMsg"></child>
　　　　　　</div>
　　　　　　使用 v-bind 的缩写语法统称更简单。
　　　　　　　　<child :my-message="parentMsg"></child>
　　　　　　字面量语法 vs 动态语法
　　　　　　　　// 实际传递参数
　　　　　　<comp v-bind:some-prop="1"></comp>
　单向数据流
　　　　1.prop 作为初始值传入，子组件之后只是将它的初始值作为本地数据的初始值使用；
　　　　2.prop 作为需要被转变的原始值传入。
　　　　定义一个局部的 data 属性 ,并将prop 的初始值作为局部数据的初始值。
　　　　props：['initialCounter'],
　　　　　　data: function () {
　　　　　　　　return { counter: this.initialCounter}
　　　　}
　　　　定义一个computed 属性。此属性从prop 的值计算出来。
　　　　props：['size'],
　　　　　　computed: {
　　　　　　　　normalizedSize: function() {
　　　　　　　　return this.size.trim().toLowerCase()
　　　　　　}
　　　　}
  Prop 验证
　　　　组件也可以为props指定验证请求，prop 是一个对象而不是字符串数组时，它包含验证要求：
　　　　　　Vue.component('example', {
　　　　　　　　props: {
　　　　　　　　　　　　// 基础类型检测 （`null` 意思是任何类型都可以）
　　　　　　　　　　propA: Number,
　　　　　　　　　　　　// 多种类型
　　　　　　　　　　propB: [String, Number],
　　　　　　　　　　　　// 必传且是字符串
　　　　　　　　　　propC: {
　　　　　　　　　　　　type: String,
　　　　　　　　　　　　required: true
　　　　　　　　},
　　　　　　// 数字，有默认值
　　　　 propD: {
 　　　　　　type: Number,
　　　　　　default: 100
　　　　},
　　　　propE: {
　　　　　　type: Object,
　　　　　　default: function () {
　　　　　　return { message: 'hello' }
　　　　　　}
　　　　},
　　　　// 自定义验证函数
　　　　propF: {
　　　　　　validator: function (value) {
　　　　　　　　　　return value > 10
　　　　　　　　}
　　　　　　　　}
　　　　　　}
　　　　})
　自定义事件
　　　　子组件需要把数据传回父组件，需要自定义事件。
　　　　使用v-on 绑定自定义事件。
　　　　使用 $on(eventName) 监听事件
　　　　使用 $emit(eventName) 触发事件
　　　　给组件绑定原生事件
　　　　可以使用 .native 修饰 v-on
　　　　　　<my-component v-on:click.native="doTheThing"></my-component>
　　　　使用自定义组件的表单输入组件
　　　　自定义事件也可以用来创建自定义的表单输入组件，使用 v-model 来进行数据双向绑定。
　　　　　　<input v-model="something">
  非父子组件通信
　　　　有时候非父子关系的组件也需要通信，在简单的场景下，使用个空的Vue 实例作为中央事件总线。
　　　　　　　　var bus = new Vue()
　　　　　　// 触发组件 A 中的事件
　　　　　　　　bus.$emit('id-selected', 1)
　　　　　　// 在组件 B 创建的钩子中监听事件
　　　　　　　　bus.$on('id-selected', function(id) {
　　　　　　//...
　　　　})
  使用Slot 分发内容
　　　　在使用组件的时候，我们常常遇到这样组合。
　　　　<app>
　　　　　　<app-header></app-header>
　　　　　　<app-footer></app-footer>
　　　　</app>
　　　　注意两点：
　　　　1.<app> 组件不知道它的挂载点有什么内容，挂载点的内容是由<app>的父组件决定的
　　　　2.组件很有可能有它自己的模板。
　　　　分发内容是在父组件作用域内编译。
  单个Slot
　　　　除非子组件模板至少包含一个<slot>插口， 否则父组件的内容将会被丢弃。当子模板只有
　　　　一个没有属性的Slot 时，父组件整个内容片断将插入到slot 所在的DOM位置，并没替换掉
  slot 标签本身。
      假定 my-component 组件有下面模板：
　　　　<div>
　　　　　　<h2>我是子组件的标题</h2>
　　　　　　<slot>
　　　　　　　　只有在没有要分发的内容时才会显示。
　　　　　　</slot>
　　　　</div>
        父组件模版：
　　　<div>
　　　　　　<h1>我是父组件的标题</h1>
　　　　　　<my-component>
　　　　　　　　<p>这是一些初始内容</p>
　　　　　　　　<p>这是更多的初始内容</p>
　　　　　　</my-component>
　　</div>
　　渲染结果：
　　　　<div>
　　　　　　<h1>我是父组件的标题</h1>
　　　　<div>
　　　　　　<h2>我是子组件的标题</h2>
　　　　　　<p>这是一些初始内容</p>
　　　　　　<p>这是更多的初始内容</p>
　　　　</div>
　　　　</div>
   具名 Slot
　　　　<slot> 元素可以用一个特殊的属性 neme 来配置如何分发内容。多个slot 可以有不同的名字，具名solt 将匹配的内容片段中有对应的slot 特殊的元素
　　　　仍然可以有个匿名slot,它是默认slot, 作为找不到匹配的内容片断的备用插槽。如果没有默认的slot 这个找不到匹配的内容将会被丢弃。
　　　　例如，假定我们有一个 app-layout 组件，它的模板为：
　　　　<div class="container">
　　　　　　<header>
　　　　　　　　<slot name="header"></slot>
　　　　　　</header>
　　　　　　<main>
　　　　　　　　<slot></slot>
　　　　　　</main>
　　　　　　<footer>
　　　　　　　　<slot name="footer"></slot>
　　　　　　</footer>
　　　　</div>
　　　　父组件模版：
　　　　　　<app-layout>
　　　　　　　　<h1 slot="header">这里可能是一个页面标题</h1>
　　　　　　　　<p>主要内容的一个段落。</p>
　　　　　　　　<p>另一个主要段落。</p>
　　　　　　　　<p slot="footer">这里有一些联系信息</p
　　　　　　</app>
　　　　渲染结果为：
　　　　　　<div class="container">
　　　　　　　　<header>
　　　　　　　　　　<h1>这里可能是一个页面标题</h1>
　　　　　　　　</header>
　　　　　　　　<main>
　　　　　　　　　　<p>主要内容的一个段落。</p>
　　　　　　　　　　<p>另一个主要段落。</p>
　　　　　　　　</main>
　　　　　　　　<footer>
　　　　　　　　　　<p>这里有一些联系信息</p>
　　　　　　　　</footer>
　　　　　　</div>
   动态组件
　　　　多个组件可以使用同一个挂载点，然后动态地在它们之间切换。使用保留的 <component> 元素，动态地绑定到它的 is 特性：
　　　　　　var vm = new Vue({
　　　　　　　　el: '#example',
　　　　　　　　data: {
　　　　　　　　　　　　currentView: 'home'
　　　　　　　　},
　　　　　　　　components: {
　　　　　　　　　　　　home: { /* ... */ },
　　　　　　　　　　　　posts: { /* ... */ },
　　　　　　　　　　　　archive: { /* ... */ }
　　　　　　}
　　　　})
　　　　<component v-bind:is="currentView">
　　　　　　<!-- 组件在 vm.currentview 变化时改变！ -->
　　　　</component>
　　　　　　　　也可以直接绑定到组件对象上：
　　　　var Home = {
　　　　　　template: '<p>Welcome home!</p>'
　　　　}
　　　　var vm = new Vue({
　　　　　　el: '#example',
　　　　　　data: {
　　　　　　　　currentView: Home
　　　　　　　　}
　　　　})

#keep-alive
　　　　如果把切换出来的的组件保留在内存中，可以保留它的状态或避免重新渲染。
　　　　　　<keep-alive>
　　　　　　　　<component :is="currentView">
　　　　　　　　　　// 非活动组件将被缓存
　　　　　　　　</component>
　　　　　　</keep-alive>
   杂项
　　编写可复用组件
　　可复用组件应当定义一个清晰的公开接口。
　　　　Vue 组件的 API 来自三部分 - props, events 和 slots ：
　　　　Props 允许外部环境传递数据额给组件。
　　　　Events 允许组件触发外部环境的副作用。
　　　　Slots 允许外部环境将额外的内容组合在组件中。
　　　　使用 v-bind 和 v-on 的简写语法，模板的缩进清楚且简洁：
　　　　　　　　<my-component
　　　　　　　　　　:foo = "baz"
　　　　　　　　　　:bar = "qux"
　　　　　　　　　　@event-a ="doThis"
　　　　　　　　　　@event-b="doThat"
　　　　　　　　>
　　　　　　　　<img slot="icon" src="...">
　　　　　　　　<p slot="main-text"></p>
　　　　　　　</my-component>
　　　#子组件索引
　　　　　　可以使用ref 为子组件指定一个索引ID 例如：
　　　　　　<div id="parent">
　　　　　　　　<user-profile ref="profile"></user-profile>
　　　　　　</div>
　　　　　　var parent = new Vue({
　　　　　　　　　　el: '#parent'
　　　　　　})
　　　　　　// 访问子组件
　　　　　　var child = parent.$refs.profile
　　　　　　当 ref 和 v-for 一起使用时， ref 是一个数组或对象，包含相应的子组件