全局组件、局部组件
定义全局组件(可以在多个vue实例中使用)
<script> const cpn = Vue.extend({ //①创建组件构造器 template:` <div> <h2>我是标题</h2> <p>我是内容哈哈哈</p> <div> ` }); Vue.component('cpn',cpn);//②注册组件 new Vue({ el:'#app', data:{ message:'hello world' }, }) </script>
语法糖
<body> <div id="app"> <cpn></cpn> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> Vue.component('cpn',{ template:` <div> <h2>我是标题</h2> <p>我是内容哈哈哈</p> <div> ` }); new Vue({ el:'#app', data:{ message:'hello world' }, }) </script> </body>
<body> <div id="app"> <cpn></cpn> <cpn2></cpn2> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> Vue.component('cpn',{ //父组件 template:` <div> <h2>我是标题</h2> <p>我是内容哈哈哈</p> <div> ` }); const cp = { template:` <div> <h2>我是标题2</h2> <p>我是内容呵呵呵</p> <div> ` } new Vue({ el:'#app', data:{ message:'hello world' }, components:{ //子组件 cpn2:cp } }) </script> </body>