父组件和子组件的使用

子组件在父组件中注册的，只能在父组件中使用，准确一点的说，子组件只能在父组件的template中使用。

• 代码如下：

<div id="app">
        <parent-component></parent-component>
    </div>

    <!-- 借助免费的CDN来引入vue.js文件 -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>
        //1、创建【子组件】
        var child=Vue.extend({
            template:"<p>这是子组件！</p>"
        });
        //2、创建【父组件】
        var parent=Vue.extend({
            //3、在父组件内使用 <child-component> 标签
            template:"<h1>这是父组件！<child-component></child-component></h1>",
            components:{
                //4、注册子组件
                "child-component":child
            }
        });
        //5、注册父组件
        Vue.component("parent-component",parent);

        //6、
        var vm=new Vue({
            el:"#app"
        });
    </script>

• 效果图如下：