<!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>Document</title>
<script src="./lib/Vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
</head>
<body>
<div id="app">
<temp></temp>
<com1></com1>
<com3></com3>
</div>
<div id="app2">
<temp1></temp1>
</div>
<template id="add">
<h3>这是第三个组件</h3>
</template>
</body>
<script>
// 定义全局变量的组件
//1 直接使用component
Vue.component(‘temp‘, {
template: ‘<h1>这是一个组件</h1>‘
})
// 2 使用Vue.extend()定义一个组件
var com1 = Vue.extend({
template: ‘<h2>这是第二个组件</h2>‘
})
Vue.component(‘com1‘, com1)
//使用template标签 创建出来的组件
Vue.component(‘com3‘, {
template: ‘#add‘
})
var vm = new Vue({
el: ‘#app‘,
data: {
},
})
var vm2 = new Vue({
el: ‘#app2‘,
data: {
},
components: {
//定义私有组件
temp1: {
template: ‘<h1>这是一个私有的组件，只能自己使用</h1>‘
}
}
})
</script>
</html>
原文地址：https://www.cnblogs.com/LittleDuan/p/11330782.html
时间： 2024-08-30 10:56:06