2018-05-22 Vue组建

二）

1. 组件（Component）是 Vue.js 最强大的功能之一。
   组件可以扩展 HTML 元素，封装可重用的代码。
   组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树
2. 注册一个全局组件语法格式如下：

3. Vue.component(tagName, options)
    栗子1全局组件：Vue.component('runoob', {
         template: '<h1>自定义组件!</h1>'
    })
    new Vue({
    el:'#app'
    })
    栗子2局部组件：
    var Child = { template: '<h1>自定义组件!</h1>'}
    new Vue({
        el:'#app',
        components:{
            'runoob': Child
        }
    })
   

4. tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：

5. <tagName></tagName>
   

6. Props
   props 是父组件用来传递数据的一个自定义属性。
   父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"
   栗子动态props
   <div id="app">
   <div>
   <input v-model.lazy="parentMsg">
   
   
   <child v-bind:message="parentMsg"></child>
   </div>
   </div>

<script>
// 注册
Vue.component('child', {
// 声明 props
props: ['message'],
// 同样也可以在 vm 实例中像 “this.message” 这样使用
template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
el: '#app',
data: {
parentMsg: '父组件内容'
}
})
</script>