<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>组件基础</title> </head> <body> <div id="app"> <button-component></button-component> <custom-button></custom-button> </div> <script src="../vue.js"></script> <script> // 注册全局组件 Vue.component(‘button-component‘, { template: ‘<button>全局组件按钮</button>‘ }) // 局部注册组件 // 注意局部注册的组件在其子组件中不可用。 const CustomButton = { template: ‘<button>局部注册组件按钮</button>‘ }; let vue = new Vue({ el: "#app", data: { }, components: { // 注册组件 ‘custom-button‘: CustomButton } }) </script> </body> </html>
参考书籍《Vue.js快跑：构建触手可及的高性能Web应用》第2章 组件-----2-1组件基础
原文：https://www.cnblogs.com/cuilichao/p/14932253.html