vue.js（三）

这里该记到vue的组件了，组件基础篇

1.vue组件的基本书写方式

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

上面定义了一个名为button-counter的组件，其内容就是最下面红字所示的那样，下面就是使用这个组件了：

//创建Vue实例
new Vue({ el: '#components-demo' })

//在Vue实例中用这个组件
<div id="components-demo">
  <button-counter></button-counter>
</div>

你可能看到了，定义这个组件的时候，数据data是通过函数的形式返回的，一个组件的 data 选项必须是一个函数，因此

每个实例可以维护一份被返回对象的独立的拷贝。所以当我们像下面这样复用组件的时候，他们的count值是互不干扰的。

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

注意：像上面那样通过Vue.component注册一个组件是全局注册，所谓全局注册，就是说这样的组件可以应用在任意的Vue

实例中。

2.数据传递之Prop

//定义一个名为“blog-post”的组件
Vue.component('blog-post', {
            props: ['title','content'],
            template: "<div ><h3>{{ title }}</h3><div v-html='content'></div></div>"
        })
//实例化一个Vue对象
        new Vue({
            el: '#blog-post-demo',
            data: {
                posts: [
                { id: 1, title: 'My journey with Vue',content:'<span style="color:red;">hello</span>' },
                { id: 2, title: 'Blogging with Vue' ,content:'<span style="color:blue;">hello</span>' },
                { id: 3, title: 'Why Vue is so fun' ,content:'<span style="color:black;">hello</span>' },
                ]
            }
        })

那么，接下来，我们就可以去使用这个组件了，因为要使用实例化Vue对象的数据，那么我们就必须将这个组件放在数据

生效的Vue组件绑定的DOM下了，上面显然是要放在ID为blog-post-demo的标签下，so：

<div id="blog-post-demo">
        <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title" v-bind:content = "post.content"></blog-post>
</div>

我们看到，通过prop属性中申明的变量名，我们向该组件绑定了两个变量。这里需要区分的是v-bind:title，现在举个栗子：

//改了下组件模板,其余不变
template: "<div ><h3 v-bind:title='title'>標題</h3><div v-html='content'></div></div>"

在使用组件的时候，v-bind:title="post.title"，这里的红字title是为title变量赋值；

对于模板，第一种模板中{{ title }}这是调用变量title，第二种模板中v-bind:title='title'，前面的title是title属性，后面的title是为title

属性赋值！所以，你看的三个红字title都是变量，不要混淆。

注意：我想你可能也注意到了红色背景的div标签，这是因为在Vue中每个组件必须只有一个根元素！所以，我们选择用一个父

标签将实际内容包起来来解决这个问题。

3.为组件绑定自定义事件

//定义组件，数据传递只通过post变量
　　　　Vue.component('blog-post', {
            props: ['post'],
            template: `
            <div class="blog-post">
                <h3>{{ post.title }}</h3>
                <button v-on:click="$emit('enlarge-text')">
                    Enlarge text
                </button>
                <div v-html="post.content"></div>
            </div>
            `
        })
//实例化一个Vue对象，并提供数据和方法
        new Vue({
            el: '#blog-post-demo',
            data: {
                posts: [
                { id: 1, title: 'My journey with Vue',content:'<span style="color:red;">hello</span>' },
                { id: 2, title: 'Blogging with Vue' ,content:'<span style="color:blue;">hello</span>' },
                { id: 3, title: 'Why Vue is so fun' ,content:'<span style="color:black;">hello</span>' },
                ],
                postFontSize: 1
            },
            methods: {
                enlarge: function () {
                    this.postFontSize += 0.1;
                }
            }
        })

接下来就是调用这个组件了：

　　<div id="blog-post-demo">
        <div :style="{ fontSize: postFontSize + 'em' }">
            <blog-post
            v-for="post in posts"
            v-bind:key="post.id"
            v-bind:post="post"
            v-on:enlarge-text="enlarge"
            ></blog-post>
        </div>
    </div>

蓝底是向这个组件内部传递数据变量（这里只能传递唯一的变量post，这在props中已经定义）和方法；

至于方法，我是这么记忆的，在组件标签属性上声明为这个组件绑定enlarge-text事件（自定义事件），这个事件调用

Vue实例的enlarge方法，然后模板内部定义，当button按钮单击的时候就会触发enlarge-text事件，于是，两两嵌套实

现了，当button按钮单击的时候触发Vue实例的method（enlarge方法）。

4.组件绑定v-model

之前我们都知道，v-model的写法，像这样：

<input v-model="searchText">
<p>{searchText}<p>

如此这般，input输入的值就会传给变量searchText，并且p标签得到响应，及时地显示出来，那么在组件当中怎么来用呢？

官网教程这么写的：

//定义组件
Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})

//声明vue实例
new Vue({
        el: '#app1',
        data: {
            msg:'aaa' 
        }
    })

//引用模板
<div id="app1">
        <custom-input v-model="msg" ></custom-input>
        {{msg}}
</div>

刚看的时候很是不解，因为v-model可以直接读取vue实例中的变量值，那么在组件声明中，为什么还要用props，以及在

模板中使用v-bind:value=‘value’？用意是什么，因为教程上没有作特别说明，所以在自己的几番探索之后，得出结论：

①上面红字的value是固定写法，用来传递vue实例中的变量，并根据引用组件时候定义的v-model值来动态改变模板

标签初始化时候的value属性值（亲测，换成其他字段初始化的时候模板标签的value属性值无效）

②v-model不仅仅可以起到绑定vue实例中变量的效果，还可以将绑定的变量通过props传到组件内部的模板上，然后在

模板内部使用v-model传来的数据。

针对第二点，我对模板作了修改，其他照旧：

Vue.component('custom-input', {
            props: ['value'],
            template: `
            <div class="custom">
            <input
            v-bind:value="value"
            v-on:input="$emit('input', $event.target.value)"
            >
            <button >{{value}}</button>
            </div>
            `
        })

然后，前台渲染如下：