源代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>组件模版的分离写法</title> </head> <body> <div id=‘content‘> <cpn1></cpn1> <cpn2></cpn2> </div> <!--组件Html代码--> <script type="text/x-template" id="cpn"> <div> <h2>我是标题</h2> <p>我是内容</p> </div> </script> <script src=‘../Vue/vue.js‘></script> <script> //注册一个全局组件components Vue.component("cpn1",{ template:"#cpn" }); const content = new Vue({ el:‘#content‘, data:{ }, methods:{ }, components:{ cpn2:{ template:"#cpn" } } }); </script> </body> </html>
原文：https://www.cnblogs.com/bihuijia/p/14394732.html