<body> <div id="app"> <conten></conten> </div> <div id="app2"> <conten></conten> </div> <div id="app3"> <!-- 在自定义组件中赋值 --> <conten title="color" con="3333"></conten> </div> <template id="tem"> <!-- 在这里渲染值 --> <h1>templatetemplate {{title}}--{{con}}--{{c}}</h1> </template> <script> Vue.component("conten",{ template:"<h1>1111111111111</h1>" }); new Vue({ el:'#app' }); //可以多个 Vue.component("conten",{ template:"<h1>222222222222222</h1>" }); new Vue({ el:'#app2' }); // 模板要先Vue.component()然后紧随其后实例化Vue指定父节点, Vue.component("conten",{ template:"#tem", props:["title","con"],//这里规定组件中可以赋值项 data:function(){ return { c:22 } } }); new Vue({ el:'#app3' }); </script> </body>