Vue组件（component方法注册组件和props属性实现组件之间传值）

一、什么是组件
在Vue中，组件是构成页面中独立结构单元。（是封装的HTML）
本次主要学习Vue.component()方法注册组件API。
功能：自定义标签
优点：开发效率提高、可维护性、可重用

二、组件化和模块化
模块化：把一个复杂的事务分为多个模块，小模块之间自由组合协助完成事务。
组件化：把页面上个重用的UI结构封装成组件，可重用性高。
区别：模块化从代码逻辑出发，组件化从UI角度出发

三、组件的定义和使用

    <div id="app">
    <!-- 使用部分，以下组件做出来的三个按钮都有自己独立的count值-->
        <my-component></my-component>
        <my-component></my-component>
        <my-component></my-component>
    </div>
    
    <script>
    //定义部分，下一行中my-component可以是myConponent(驼峰命名)
        Vue.component('my-component', {
            data () {
                return {
                    count: 0
                }
            },
            template:'<button v-on:click="count++">被单击{{count}}次</button>'
        })
        var vm=new Vue({
            el: '#app'
        })
    </script>

1、其中，为什么data中要写方法？
答：为了组件被使用时，数据相互独立。

2、局部注册组件

    <div id="app">
        <my-component></my-component>
    </div>
    <script>
        var com1={
            template:'<p>我是vm实例中的局部组件</p>'
        }
        var vm=new Vue({
            el: '#app',
            //注册局部组件
            components:{myComponent: com1}
        })
    </script>

3、template模板
Vue提供了template标签来定义结构模板，优点：不容易出错，开发体验和效率提升。

    <div id="app">
        <p>{{title}}</p>
        <my-component></my-component>
    </div>

    <!-- template模板 -->
    <template id="tmp1">
        <p>{{title}}</p>
    </template>

    <script>
    //通过id将template模板与组件绑定
        Vue.component('my-component',{
            template: '#tmp1',
            data(){
                return{
                    title:'我是组件内的title'
                }
            }
        })

        var vm=new Vue({
            el:'#app',
            data:{
                title:'我是vm实例的title'
            }
        })
    </script>

4、props传值
组件与组件之间实现数据传递，需要借助工具（如：props属性）
props传值，父传子

    <div id="app">
        <my-parent name="title"></my-parent>
    </div>
    <script>
        //父组件传递数据（props接收name值，而name值在父组件中）
        Vue.component('my-parent',{
            props:['name'],
            template: '<div>我是父组件{{name}}</div>'
        })
        var vm=new Vue({
            el: '#app'
        })
    </script>

当然props属性中定义的name值也可以与Vue中的data值进行绑定，
data数据变化，name也变化。

    <div id="example">
        <my-component v-bind:boxoffice="boxoffice"></my-component>
    </div>

    <script>
        //传递动态Prop
        Vue.component('my-component',{
            props:['boxoffice'],
            template: '<p>该电影票房已经达到了{{boxoffice}}亿元</p>'
        })

        var vm=new Vue({
            el: '#example',
            data:{
                boxoffice:20
            }
        })
    </script>

结合组件进行列表渲染

    <div id="example">
        <my-item :list="type"></my-item:list>
    </div>

    <script>
        Vue.component('my-item',{
            props:['list'],
            template:'<ol>\
                <li v-for="item in list">{{item}}</li>\
                </ol>'
        })
        
        var vm=new Vue({
            el: '#example',
            data:{
                type:['HTML','CSS','JavaScript']
            }
        })
    </script>

v-bind省略冒号部分，可以直接绑定data中的数组

    <div id="example">
    <!-- v-bind:value=“”直接省略为v-bind=“”-->
        <my-shop v-bind="shop"></my-shop>
    </div>
    <script>

        Vue.component('my-shop',{
            props:['name','price','number'],
            template:'<div>\
                <div>名称：{{name}}</div>\
                <div>价格：{{price}}</div>\
                <div>数量：{{number}}</div>\
                </div>'
        })
        var vm=new Vue({
            el: '#example',
            data:{
                shop:{
                    name:'华为P20',price:3000,number:10
                }
            }
        })
    </script>

调用组件的属性使用驼峰命名方式

    <div id="example">
     <!-- 注意：使用驼峰式命名的属性，在props中和template插值表达式中的命名需要全部小写！ -->
        <my-component myTitle="诗与远方"></my-component>
    </div>
    <script>
        Vue.component('my-component',{
            //调用组件的属性使用了驼峰命名方式，props属性命名全部小写
            props:['mytitle'],
            template:'<p>{{mytitle}}</p>'
        })
        var vm=new Vue({
            el: '#example'
        })
    </script>

props中使用小驼峰的方式

    <div id="example">
        <my-component my-title="诗与远方"></my-component>
    </div>
    <script>
        Vue.component('my-component',{
            // 如果props中使用小驼峰的方式，那么调用组件需要用等价的短横线分隔命名方式
            props:['myTitle'],
            template:'<p>{{myTitle}}</p>'
        })
        var vm=new Vue({
            el:'#example'
        })
    </script>