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）并且单击事件企图更改其值，这也就是文档中提到的：