vue.js（四）

由于组件内容太多又特别关键，我决定在官网教程的基础上，加上自己的理解，针对每个内容详细记录一下

 1.注册组件

①全局注册

//首先创建组件
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: '#app1',
            data: {
                msg:'aaa' ,
                msg1:'bbb'
            }
        })

这样，就能在任意标签内部使用该组件了，但是数据还是根据Vue实例绑定的数据来的

注意：全局注册组件的话，必须先创建组件再创建Vue实例

②局部注册

//创建组件，声明变量
　　　　 var componentA ={
            props: ['value'],
            template: `
            <div class="custom">
                <input
                v-bind:value="value"
                v-on:input="$emit('input', $event.target.value)"
                >
                <button >{{value}}</button>
            </div>
            `
        }
//创建Vue实例
        new Vue({
            el: '#app3',
            data: {
                msg:'aaa',
                msg1:'bbb'
            },
            components: {
                'component-a':componentA
            }
        })

前台调用：

<div id="app3">
        <component-a v-model="msg"></component-a>
</div>

关于组件绑定v-model的用法详解，请参照这篇博客 https://www.cnblogs.com/eco-just/p/9136732.html 的第四点。

2.数据传递之Prop

其实在上篇已经提到过prop了，但是可能说得不太明了，这里采用画图的形式再说明一次，也为了加深自己的理解

 

我想这张图已经很好地表达了数据传递的过程。

但是，单击改变count值的时候控制台会报这种错：

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "count"

found in

---> <ButtonCounter>
       <Root>

因为这里组件的数据来源于外部父组件（parent component）并且单击事件企图更改其值，这也就是文档中提到的：

当然，vue也是给出了解决方案，那就是组件中定义的data属性：

这样的话，单击事件改变变量的值是被允许的，因为此时组件操纵的数据是属于组件自己的了，并且组件复用的时候，组件之间是不会相互影响的。

下面讲组件数据传递的一个特例：双向数据绑定。

我们都知道，vue中v-model实现了双向数据绑定，name在组件中，v-model是这样用的：

值得注意的是，在组件中使用v-model时，v-model绑定的值默认是通过props中的value传递的，他不像之前的单向数据

绑定（v-bind:count="b"时，props通过count传递数据）

可能你也注意到了，上面讲到v-model绑定的值默认是通过value变量传递（这个value可以代表传递过来的任何值），那么

如何自定义绑定的值呢？

这里的vb就相当于之前的value。

另外，由于是双向数据绑定，子组件改变了变量值，会及时反映到父组件中去，如果其他地方也用到了父组件的该变量，那么

将会得到及时更新。

附：props的数据验证（了解就好）

3.自定义事件

我想这张图已经很好地展示了自定义事件调用的过程（之前应该有提到过）。那么怎么通过v-model来调用函数呢