VUE的组件（未完）

Vue的全局组件

关键词用component，以VUE.component（）创建全局组件
第一个参数为创建的标签

<div id="app">
        <hi></hi>
    </div>
    <!-- 标签要用 component中的第一个参数 -->
    <script>
        Vue.component('hi', {
            // template为添加的内容
            template: '<h2>你好</h2>',
            // 页面加载前的函数，自动执行
            created() {
                console.log("创建方法")
            }
        })
        // 根目录
        var app = new Vue({
            el: "#app",
            data: {

            }
        })
    </script>

Vue的局部组件

局部组件直接用let创建 ，分三个步骤
1.创建局部组件
第一种：template直接填充内容，没有id

 let hello ={
        template:"<h2>hello</h2>"
    }

第二种：

let hello={
    //     template:"#hi"
    // }

2.注册组件

 components:{
            hello
        }

3.使用组件 标签名为let出来的名字，在HTML中使用
第一种的使用方法：

   <hello></hello>

第二种的使用方法：用template来作为标签，并有id名，内容在中间填充

  <template id="hi"><h3>123123123</h3></template>

完整的案例为：

    <div id="app">
        <!--3. 使用组件 标签名是let出来的名字-->
        <hello></hello>
    </div>
    <!--第二种 <template id="hi"><h3>123123123</h3></template> -->
    <script>
        // 定义局部组件
    let hello ={
        template:"<h2>hello</h2>"
    }
    //***********2***********
    // let hello={
    //     template:"#hi"
    // }
    //根组件
    var app =new Vue({
        el:"#app",
        data:{

        },
        //2.注册组件
        components:{
            hello
        }
    })
    </script>

Vue的组件嵌套

 <div id="app">
            <grandfather></grandfather>
    </div>
    <script>
        let son = {
            template: "<h2>son</h2>"
        }
        let father = {
            template: "<h3>father<son></son></h3>",
            components: {
                son
            }
        }
        let grandfather = {
            template: "<h5>grandfather<father></father></h5>",
            components: {
               father
            }
        }
        var app = new Vue({
      el: "#app",
      data: {

      },
      //注册组件
      components: {
        grandfather
      }
    })
    </script>

Vue的父子组件通讯