不论我们使用哪种方式创建出来的组件,组件中的template属性指向的模板内容中,必须有且只有一个根元素,其他元素必须在这个根元素下面。

1.使用Vue.extend配合Vue.component定义全局组件

    在使用Vue.extend配合Vue.component定义全局组件时,Vue.extend里面定义template模板,而
Vue.component里面是要注册一个组件。
<body> <div id="app"> <!--第三步页面中使用 --> <!--
如果要使用组件,直接把组件的名称以HTML标签的形式引入到页面中--> <my-compnent></my-compnent> </div> <script>
//第一步:使用Vue.extend来创建全局组件 var com1 = Vue.extend({
//通过template模板的属性来展示组件要显示的html template: '<h2>使用Vue.extend创建全局组件</h2>' });
//第二步:使用 Vue.component('组件名称',创建出来的组件模板对象) Vue.component('myCompnent', com1);
// 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: {}
}); </script> </body>
【注意】在定义注册组件时,组件的名称不需要按照驼峰命名,但是在页面引入组件时,组件的名称必须按照驼峰命名。

简写如下:

2.直接使用Vue.component定义全局组件

这里是直接使用Vue.component直接创建一个组件
<div id="app"> <my-com2></my-com2> </div> <script> Vue.component('myCom2', {
template: '<h2>直接使用Vue.component创建组件</h2>' }); // 创建 Vue 实例,得到 ViewModel var vm
= new Vue({ el: '#app', data: {}, methods: {} }); </script>
3.Vue外部直接定义template

 
<body> <div id="app"> <my-com3></my-com3> </div> <template id="tmp1"> <div>
<h2>这是通过template元素,在外部定义组件的结构,有代码的提示和高亮</h2> </div> </template> <script>
Vue.component('myCom3', { template: "#tmp1" }); var vm = new Vue({ el: '#app',
data: {}, methods: {} }); </script> </body>

技术
©2020 ioDraw All rights reserved
程序员升职记第28关三排序代码使用ADB命令卸载安卓设备上的应用centos7部署springboot jar包网上赚钱的门路方法,大部分人都是利用这三种方法!每周计划思维导图模板mac解决Enter passphrase for key每次输入密码PHP 先返回结果到前端,PHP代码继续执行后续的任务MariaDB数据库用户创建/删除及权限授权/撤回Docker容器和镜像的导入、导出天猫等网店要挟用户成风?要硬钢!别惯他们臭毛病