Vue组件

组件实质就是一个可复用的模板，创建一个拥有指定功能的组件，在任何需要使用的时候，都可以直接拿来使用。
组件注册分为全局注册和局部注册。全局注册的组件可以在任何Vue的实例中使用。而局部注册的组件只可以在当前注册的Vue实例中使用。而组件起名方式也有驼峰命名法，和全小写写法，而Vue官网推荐使用全小写带-写法。具体代码如下：

    <div id="app">
        <frist></frist>
        <my-second></my-second>
        <my-three></my-three>
        <my-four></my-four>
        <my-five></my-five>
    </div>
     //全局注册三种命名写法
        Vue.component('frist', {
            template: `<div>我是全小写写法</div>`
        })
        Vue.component('my-second', {
            template: `<div>我是代-写法</div>`
        })
        Vue.component('myThree', {
            template: `<div>我是驼峰写法</div>`
        })
        局部注册写法
        const app = new Vue({
            el: '#app',
            //局部注册组件
            components:{
                myFour:{
                    template:`<h1>我是局部注册组件1</h1>`
                },
              'my-five':{
                   template:`<h1>我是局部注册组件2</h1>`
                }
            }
        });
复制代码

is的用法

is是Vue官方的一个属性。程序刚进来的时候会先加载组件，后加载标签。所以当我们在组件之中写我们自定义的组件时，他会被系统先加载出来，这就会造成我们的排盘错误，这是我们使用is属性就可以解决这个问题。

    <table>
            <tr>
                <th>展示table</th>
            </tr>
            <!-- is Vue当中的属性   is后面要写组件的名称  -->
            <tr is="my-tr"></tr>
        </table>
复制代码

动态组件

在一个页面之中，你有时会频繁切换一些组件，而在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。这时我们需要使用动态组件。

    <div id="app">
        <main>
            <section>
                <div @click='type= "nan"'>男装</div>
                <div @click='type= "nv"'>女装</div>
                <div @click='type= "tong"'>童装</div>
                <div @click='type= "xie"'>鞋子</div>
            </section>
            <!-- <tr is="my-tr"></tr> -->
            <component :is="type"></component>
        </main>

    </div>
  Vue.component("nan" , {
            template:"<h1>我是男装</h1>"
        })
        Vue.component("nv" , {
            template:"<h1>我是女装</h1>"
        })
        Vue.component("tong" , {
            template:"<h1>我是童装</h1>"
        })
        Vue.component("xie" , {
            template:"<h1>我是鞋子</h1>"
        })
        new Vue({
            el:"#app",
            data:{
                type:"nan"
            },
            watch:{
                type(){
                    console.log(this.type);
                }
            }
        })
复制代码

Vue组件的data属性和根节点

在Vue组件中，需要有一个标签，而在组件之中的data必须是一个函数，这是为了防止复用组件时发生错误。

Vue组件之父传子

我们在Vue父组件中定义的信息，不能直接拿到子组件中使用，如果子组件想使用父组件中的信息，就需要让父组件传递给子组件需要的信息，然后使用动态属性绑定一个属性，之后再子组件中使用props这个属性接收这个动态属性，然后就可以在子组件中使用这个动态属性，这个动态属性对应的就是父组件传过来的信息。当然我们也可以直接定义属性传值。

    <div id="app">
        <son :mymes='message' money='500'></son>
    </div>
    <script>
        Vue.component('son', {
            template: `<div>我是子组件 {{mymes}} {{mesSon}} {{money}}</div>`,
            props:['mymes','money'],
            data() {
                return {
                    mesSon: '我是子组件里的信息'
                }
            }
        })
        const app = new Vue({
            el: '#app',
            data: {
                message: '我是父组件中的信息'
            },
            methods: {}
        });
复制代码