Vue.js学习笔记--4. 组件的基本使用

　　

整理自官网教程 -- https://cn.vuejs.org/

　　

　　1. 所有Vue组件同时也都是Vue实例，分为全局组件和局部组件，注册方式如下。　　

<div id="app">
    <my-component></my-component>
    <child-component></child-component>
</div>
<div id="example">
    <my-component></my-component>
    <!--在#app内局部注册的组件在此无法被渲染 -->
    <child-component></child-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
Vue.component('my-component', { //全局组件，建议使用短横线分隔式命名组件
  template: '<div>A custom component!</div>'
})
var Child = {
    template: '<div>A child component!</div>'
}
var app = new Vue({
    el: '#app',
    components: { //局部组件，仅可在父作用域#app中使用
    'child-component':Child
    }　　
})
var example = new Vue({
    el:'#example'
})
</script> 

　　注意：

　　a. 如<ul>、<table>和<li>、<tr>等父子元素有限制的元素，不能直接使用组件模板，可由is属性来指定，如<tr is="my-row"></tr>。若使用来自以下来源之一的字符串模板（允许嵌入表达式的字符串字面量），则没有这些限制：

　　1) <script type="text/x-template">

　　2) JavaScript 内联模板字符串:　　　　

　　　　Vue.component('component1',{
　　　　　　template: '<tr><td>child component</td></tr>'
　　　　});
　　　　Vue.component('component2',{
　　　　　　template: '<table><component1></component1></table>'
　　　　});

　　3) .vue 组件

　　b. 组件实例中 data 必须是一个函数，否则会给每个组件实例返回对同一个对象的引用

　　

　　2. 父子组件组合使用

　　a. 父组件传递数据给子组件

　　　　1) 在子组件中由props声明预期数据。

　　　　2) 属于单向数据流，子组件不能直接修改prop。

　　　　3) 若要设置prop类型验证，则不能用字符串数组，应定义:

　　　　　　props:{

　　　　　　　　 propA: Number,

　　　　　　　　 propB: [String, Number]

　　　　　　}

　　　　4) 若要添加非prop属性，则在使用子组件时，在标签中设置该属性="true"。

　　b. 子组件触发父组件事件

　　　　1) 利用 $on(eventName) 监听事件和 $emit(eventName,optionalPayload) 触发事件。

　　　　2) 结合定义的空实例，也可允许非父子组件的通信。

　　c. 父子组件数据组合--利用插槽slot

　　　　1) 子组件中设置<slot>，父组件可分发内容到默认slot或指定slot="slotName"。

　　　　2) 父组件中设置slot-scope="props"，可获取子组件slot标签的属性。

　　　　3) 需注意父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。

　　3. 其他

　　a. 通过 v-bind:is = "componentObject"，可动态切换组件。若要缓存切出去的组件，则为其添加父元素<keep-alive>。

　　b. 在子组件中设置 ref="xx" ,可由 child = vm.$refs.xx 操作子组件。 -- 只是一种紧急手段。