深入浅出学Vue(四) | Vue组件的使用

初识组件

可以通过一个简单的组件来认识组件。

1. 新建组件

   Vue.component('mycomponent', {
       data: function(){
           return {
               number: 0
           }
       },
       template: '<button v-on:click="number++">值为{
       {number}}</button>'
   })
   

   • Vue.component( ‘组件名称’，{组件内容} )
   • data组件数据，必须使用函数的形式返回，这样多个组件才不会使用同一个data，避免相互影响。
   • template组件的html内容，即展示的内容。

2. 使用组件

   注意：组件必须放在实例创建前

   <div id="app">
   	<mycomponent></mycomponent>
   </div>
   

   • 直接用名称定义即可

组件注册

注意：组件只可以有一个外标签，意味着当我们需要使用多个标签时，应该使用一个外标签将其包裹。

全局组件

使用Vue.extend()方法

<div id="app">
    <mycomponent></mycomponent>
</div>
<script type="text/javascript">
    var com1 = Vue.extend({
     
        template: '<h1>hello,组件</h1>'
    })
    Vue.component('mycomponent', com1)
    var app = new Vue({
     
        el: '#app'
    })
</script>

简写

<div id="app">
    <mycomponent></mycomponent>
</div>
<script type="text/javascript">
    Vue.component('mycomponent', {
     
        template: '<h1>hello,组件</h1>'
    })
    var app = new Vue({
     
        el: '#app'
    })
</script>

通过template绑定外部标签

• 好不容易从前端的html标签拼接中逃离出来，又要继续使用？当然不是

<div id="app">
    <mycomponent></mycomponent>
</div>
<template id="com">
    <h1>hello,组件</h1>
</template>
<script type="text/javascript">
    Vue.component('mycomponent', {
     
        template: '#com'
    })
    var app = new Vue({
     
        el: '#app'
    })
</script>

将组件绑定给变量（简化逻辑）

<div id="app">
    <com></com>
    <com></com>
</div>
<template id="com">
    <div>
        <h1>{
  {count}}</h1><br>
        <button type="button" v-on:click="add">+1</button>
    </div>
</template>
<script type="text/javascript">
    let component1 = {
     
        template: '#com',
        data: function(){
     
            return{
     
                count: 0
            }
        },
        methods: {
     
            add(){
     
                this.count++
            }
        }
    }
    Vue.component('com', component1)
    var app = new Vue({
     
        el: '#app'
    })
</script>

局部组件

局部绑定html标签

<div id="app">
    <com></com>
</div>
<script type="text/javascript">
    var app = new Vue({
     
        el: '#app',
        components: {
     
            com: {
     
                template: '<h1>hello,组件</h1>'
            }
        }
    })
</script>

局部绑定外部template

<div id="app">
    <com></com>
</div>
<template id="com">
    <h1>hello,组件</h1>
</template>
<script type="text/javascript">
    var app = new Vue({
     
        el: '#app',
        components: {
     
            com: {
     
                template: '#com'
            }
        }
    })
</script>

尽量使用绑定外部template的方式，这样一定程度上可以提高程序的复用性和使逻辑结构更加清晰，特别是当和数据交互时。

将组件绑定给变量（简化逻辑）

<div id="app">
    <com></com>
</div>
<template id="com">
    <h1>hello,组件</h1