局部组件
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<custom-part1></custom-part1>
</div>
<template id="Local1">
<div>局部组件</div>
</template>
</body>
<script type="text/javascript">
const part1 = {
template: '#Local1',
data() {
return {}
}
}
new Vue({
el: '#app',
components: {
'custom-part1': part1,
}
})
</script>
</html>
全局组件
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<custom-global1></custom-global1>
</div>
<template id="Global">
<div>全局组件</div>
</template>
</body>
<script type="text/javascript">
//全局组件
Vue.component('custom-global1', {
template: '#Global',
data() {
return {}
}
})
new Vue({
el: '#app',
})
</script>
</html>
局部组件,extend 转为构造函数， 然后手动调用 $mount 转为真实Dom实例化
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<custom-part2></custom-part2>
</body>
<script type="text/javascript">
//局部组件
//extend 转为构造函数， 然后手动调用 $mount 转为真实Dom实例化
var part2 = Vue.extend({
template: "<div>局部组件2</div>",
data: function () {
return {
}
}
});
new part2().$mount('custom-part2');
</script>
</html>
extend传参
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<custom-part3></custom-part3>
</body>
<script type="text/javascript">
var part3 = Vue.extend({
template: "<div>{{text}}</div>",
data: function () {
return {}
},
props: ['text']
});
new part3({ propsData: { text: '局部组件3传参' } }).$mount('custom-part3');
</script>
</html>
extend与component配合
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="app">
<extend-component></extend-component>
</div>
</body>
<script type="text/javascript">
// extend与component配合
var part = Vue.extend({
template: "<div>extend与component配合</div>",
data: function () {
return {}
}
})
// 配合component
Vue.component("extend-component", part);
new Vue({
el: '#app',
})
</script>
</html>
