VUE单文件组件

1.el只能在用new的时候使用！！如果使用对象来创建组件，那么就不能使用el！也就是说组件定义式不能写el配置项，因为最终所有组件最终都由一个vm管理

但是vm里面可以写成对象，因为vm只有一个，但是子组件可能使用很多次所以只能写成函数式

2.我们的data必须写成函数式，不能 写成对象式

原因

这个位置我们的x1和x2指向的是同一个东西，当我们修改x1的 时候我们的x2也会跟着修改，但是如果我们写成函数式就能避免这个问题：

3.使用组件三步骤

1.extend创建组件

    <script>
        const school=Vue.extend({
            template:`
            <div>
            <h2>n1的值:{{n1}}</h2>
            <h2>n2的值:{{n2}}</h2>
            </div>
            `,
            data(){
                return{
                    n1:"xppp",
                    n2:"sddd"
                }
            }
        })
        const stude=Vue.extend({
            template:`
            <div>
            <h2>n3的值:{{n3}}</h2>
            <h2>n4的值:{{n4}}</h2>
            </div>
            `,
            data(){
                return{
                    n3:"pppx",
                    n4:"eeeex"
                }
            }
        })
    </script>

2.注册组件，使用components

局部注册

new Vue({
            el:"#root1",
            components:{
                xuexiao:school,
                xuesheng:stude
            }
        })

若我们组件名和注册的时候同名，那么我们可以简写成这样：

全局注册:靠Vue.component( ‘组件名’,组件)

是 component，没有加s。

3.使用：

<div id="root1">
        <xuexiao></xuexiao>
        <xuesheng></xuesheng>
    </div>