前端基础-Vue.js组件

第9章 组件

https://cn.vuejs.org/v2/guide/components.html

https://cn.vuejs.org/v2/guide/components-registration.html

9.1 认识组件

组件系统是 Vue 的一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。通常一个应用会以一棵嵌套的组件树的形式来组织：

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

9.2 基本使用

组件是可复用的 Vue 实例，且带有一个名字。把这个组件作为自定义元素来使用。组件的好处是写一次可以进行任意次数的复用。

<div id="app">
    <!-- 使用组件 -->
    <!-- 将组件名直接当做标签名在html代码中使用即可 -->
    <mytemp></mytemp>
    <!-- 组件可以进行任意次数的复用 -->
    <mytemp></mytemp>
</div>
<script>
    // 定义一个名为 mytemp 的新组件
    Vue.component('mytemp',{
        // template属性的值，作为组件的内容
        // vue 会把这个值替换到html中并会被浏览器渲染
        template:"<h2>我是一个组件</h2>"
    })
    var app = new Vue({
        el: '#app',
    })
</script>

上面代码中我们直接使用 Vue.component() 方法定义了组件，而这个 mytemp 组件可以用在所有 vue 实例中，

这种组件被称为 全局组件

在具体的某个vue实例中，也可以定义组件，但是组件仅会在具体的 vue 实例中起作用，这种组件被称为 局部(私有)组件

<div id="app">
    <!-- 使用组件 -->
    <!-- 将组件名直接当做标签名在html代码中使用即可 -->
    <mytemp></mytemp>
</div>
<div id="app2">
    <!-- 不可用 -->
    <mytemp></mytemp>
</div>
<script>
    var app = new Vue({
        el: '#app',
        // app 的私有组件，其他实例对象不可用
        components: {
            mytemp: {
                template: "<h2>我是一个组件</h2>",
            }
        }
    })
    var app2 = new Vue({
        el: '#app2',
    })
</script>

9.3 使用注意

组件名如果是驼峰法命名，使用组件时要将大写字母改为小写，并且在前面加上 -

组件中的tamplate属性必须有一个唯一的根元素，否则会报错

<div id="app">
    <!-- 使用组件 -->
    <!-- 将组件名直接当做标签名在html代码中使用即可 -->
    <my-temp></my-temp>
    <!-- 单标签方式使用 -->
    <my-temp/>
</div>
<div id="app2">
    <!-- 不可用 -->
    <mytemp></mytemp>
</div>
<script>
    var app = new Vue({
        el: '#app',
        // app 的私有组件，其他实例对象不可用
        components: {
            // 驼峰法命名
            myTemp: {
                // 必须有唯一的根标签，多标签报错
                template: "<div><h2>我是一个组件</h2><h3>df</h3></div>",
            }
        }
    })
    var app2 = new Vue({
        el: '#app2',
    })
</script>

9.4 组件的使用

CSS 代码

* {
    margin: 0;
    padding: 0;
}

.top {
    width: 100%;
    height: 80px;
    background-color: #ccc;
}

.left {
    margin-top: 20px;
    width: 800px;
    height: 600px;
    background-color: #ccc;
    float: left;
}

.right {
    margin-top: 20px;
    width: 400px;
    height: 600px;
    background-color: #ccc;
    float: right;
}

原始HTML代码

<div id="app">
    <div class="top">我是顶</div>
    <div class="left">我是左</div>
    <div class="right">我是右</div>
</div>

组件化代码

<div id="app">
    <tops></tops>
    <lefts></lefts>
    <rights></rights>
</div>
<script>
    var app = new Vue({
        el: '#app',
        components:{
            tops:{
                template:'<div class="top">我是顶</div>'
            },
            lefts:{
                template:'<div class="left">我是左</div>',
            },
            rights:{
                template:'<div class="right">我是右</div>'
            }
        }
    })
</script>

9.5 组件中的数据及方法

组件是带有名字的可复用的 Vue 实例 ，所以它们与 new Vue 实例对象接收相同的参数选项 data、computed、watch、methods , 但 el例外；

虽然组件和实例对象可以接收相同的参数选项，但在具体使用中，vue实例对象的 data 与组件中的 data 还是有差异的, 在我们自己写的组件中，data 必须是一个函数

一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回的对象；

<div id="app">
    <my-temp></my-temp>
</div>
<script>
    var app = new Vue({
        el: '#app',
        components: {
            myTemp: {
                // 一个组件的 data 选项必须是一个函数
                data:function(){
                    // 将 数据 装入 对象 返回
                    return {msg:'我是data选项'}
                },
                // 其他选项的使用不受影响
                methods:{
                    cli(){
                        alert(123);
                    }
                },
                template: "<div @click='cli'>{{msg}}</div>",
            }
        }
    })
</script>

除 data 选项外，其他选项的使用都是一样的；

9.6 vue实例也是组件

通过new Vue() 可以得到一个实例对象，其实这个实例对象就是一个特殊的组件，也有 template 参数，也可以当做组件来使用；

<div id="app">
    {{msg}}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data:{msg:'数据'},
        template:'<h2>组件</h2>'
    })
</script>

上面的代码中直接为Vue 实例对象传入了 template 参数，那么 vue 会使用template中的数据替换 el 选中的整个 DOM 节点 , 因此 data 选项中的的数据也不会绑定，因为在绑定数据之前，整个 DOM 节点包括节点中 {{msg}} 都会被替换；如果想让数据正常绑定，我们可以在 template 数据中加入 {{msg}}

<div id="app">
    {{msg}}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data:{msg:'数据'},
        template:'<h2>组件{{msg}}</h2>'
    })
</script>

9.7 通过 Prop 向子组件传递数据 *

https://cn.vuejs.org/v2/guide/components.html

<div id="app">
    <mytemp></mytemp>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data:{msg:'数据'},
        components:{
            mytemp:{
                template:'<h2>data:{{msg}}</h2>'
            }
        }
    })
</script>

运行上面的代码，我们发现，组件 mytemp 并不能获取实例中 data 的数据，这是因为组件与组件之间都拥有各自独立的作用域；

vue 在组件中提供了props 选项，props 接受一个在组件中自定义属性的值；

<div id="app">
    <mytemp cc="我是cc"></mytemp>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data:{msg:'数据'},
        components:{
            mytemp:{
                template:'<h2>data:{{cc}}</h2>',
                props:['cc'],
            }
        }
    })
</script>

我们知道了props的用法后，怎么才能将vue实例对象中的数据传入组件中呢？我们可以借助 v-bind 指令来进行传值；

<div id="app">
    <mytemp v-bind:cc="msg" v-bind:kk="msg2"></mytemp>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            msg:'数据',
            msg2:'数据二'
        },
        components:{
            mytemp:{
                template:'<h2>data:{{cc}}<br>{{kk}}</h2>',
                props:['cc','kk'],
            }
        }
    })
</script>

vue实例对象也是一个组件，而 mytemp 组件就是运行在 实例对象下面的，这时我们也会将 实例对象称为 父组件，将 mytemp 组件称为 子组件； 而我们上面的代码，实际上已经实现了 父组件向子组件传递数据的 功能；