【Vue】组件化基本使用、全局组件和局部组件、父子组件

<div id="app">
   <!-- 3.使用组件 -->
   <cpc/>
</div>
<script src="../vue.js"></script>
<script>
   // 导入的Vue.js里面存在一个Vue对象。
   //1.创建组件（组件构造器）
   const componentContructor = Vue.extend({ //extend接收一个对象参数
       //template属性：定义组件的模板(内容)，建议使用反引号``
       template: `<div>
                       <h1>我是标题</h1>
                       <p>我是内容：呱呱呱呱呱</p>
                       <p>我是内容：咕咕咕咕咕</p>
                   </div>`,
   });
   //2.注册组件（这样创建的是全局组件）
   // Vue.component('组件的标签名',组件构造器);
   Vue.component('cpc', componentContructor);
   const app = new Vue({
       el: '#app', //页面中ID为app的元素内部就是Vue实例作用的范围
       data: {
           msg: 'hello,Vue'
       }
   });
</script>

<div id="app">
    <p>我是实例app</p>
    <!-- 3.使用组件 -->
    <cpc></cpc>
</div>
<div id="app2">
    <p>我是实例app2</p>
    <cpc></cpc>
</div>
<script src="../vue.js"></script>
<script>
    // 导入的Vue.js里面存在一个Vue对象。
    //1.创建组件（组件构造器）
    const componentContructor = Vue.extend({ //extend接收一个对象参数
        //template属性：定义组件的模板(内容)，建议使用反引号``
        template: `<div>
                        <h1>我是标题</h1>
                        <p>我是内容：呱呱呱呱呱</p>
                        <p>我是内容：咕咕咕咕咕</p>
                    </div>`,
    });
    //2.注册组件，这样创建的是全局组件
    // Vue.component('组件的标签名',组件构造器);
    Vue.component('cpc', componentContructor);
    const app = new Vue({
        el: '#app', //页面中ID为app的元素内部就是Vue实例作用的范围
        data: {
            msg: 'hello,Vue'
        }
    });
    const app2 = new Vue({
        el: '#app2', //页面中ID为app的元素内部就是Vue实例作用的范围
        data: {
            msg: '我是页面中的第二个实例'
        }
    });
</script>

<div id="app">
    <p>我是实例app</p>
    <cpc></cpc>
</div>
<div id="app2">
    <p>我是实例app2</p>
    <cpc></cpc>
</div>
<script src="../vue.js"></script>
<script>
    const componentContructor = Vue.extend({ 
        template: `<div>
                        <h1>我是标题</h1>
                        <p>我是内容：呱呱呱呱呱</p>
                        <p>我是内容：咕咕咕咕咕</p>
                    </div>`,
    });
    const app = new Vue({
        el: '#app', //页面中ID为app的元素内部就是Vue实例作用的范围
        components: {//注册局部组件
            //标签名：组件构造器
            cpc: componentContructor,
        }
    });
    const app2 = new Vue({
        el: '#app2', //页面中ID为app的元素内部就是Vue实例作用的范围
    });
</script>

<div id="app">
    <second-one></second-one>
</div>
<script src="../vue.js"></script>
<script>
    //创建第一个组件
    const firstOne = Vue.extend({
        template: `
        <div>
            <h1>我是标题噻</h1>
            <p>我是内容噻</p>
            <p>呱呱呱</p>
        </div>`,
    });
    //创建第二个组件
    const secondOne = Vue.extend({
        template: `
        <div>
            <first-one></first-one>
            <h1>我是标题2噻</h1>
            <p>我是yueyueyue</p>
            <p>咕咕咕</p>
        </div>`,
        components: { //组件构造器里面的components属性
            //可以在这里面进行组件的注册，这里注册的组件就会称为该组件的子组件。
            firstOne: firstOne
        }
    });
    const app = new Vue({
        el: '#app',
        components: {
            secondOne: secondOne,
        }
    });
</script>

<div id="app">
    <second-one></second-one>
    <first-one></first-one>
</div>