Vue中创建私有组件的两种方式
Vue中创建私有组件的两种方式
1、直接在Vue实例中创建
（1）在new Vue({});中定义私有组件
components: { //定义实例内部私有组件
login: {
template: "<h1>这是自定义的login组件</h1>"
}
},
（2）在对应的实例中使用 标签形式 使用定义的组件
<login></login>
（3）完整实例如下：
其中的login就是定义的私有组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vueApp</title>
</head>
<body>
<div id="app">
<mycom3></mycom3>
<login></login>
<login></login>
</div>
<!-- 在被控制的 #app 外面，使用 tempalte 元素，定义组件的HTML结构 -->
<template id="tmp1">
<div>
<h1>这是通过 template 元素，在外部定义的组件结构，这个方式，有代码的提示和高亮</h1>
<span>Well done！</span>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component("mycom3", {
template: '#tmp1'
});
var app = new Vue({
el: "#app",
data: {
},
methods: {
},
filters: {
},
directives: {
},
components: { //定义实例内部私有组件
login: {
template: "<h1>这是自定义的login组件</h1>"
}
},
beforeCreate() {
},
created() {
},
beforeMount() {
},
mounted() {
},
beforeUpdate() {
},
updated() {
},
beforeDestroy() {
},
destroyed() {
},
});
</script>
</body>
</html>
2、将私有组件的模板独立出来
（1）在new Vue({});中定义私有组件
components: { //定义实例内部私有组件
login: {
template: "#loginDiv"
}
},
（2）在被控制的 #app 外面，使用 template 元素，定义组件的HTML结构
<!-- 定义私有组件模板 -->
<template id="loginDiv">
<div>
<h1>这是自定义的login组件</h1>
<span>好啦好啦，我知道啦。</span>
</div>
</template>
（3）使用组件：还是引用 标签形式 ，引入自己的组件
<div id="app">
<!-- <mycom3></mycom3> -->
<login></login>
</div>
（4）完整实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vueApp</title>
</head>
<body>
<div id="app">
<!-- <mycom3></mycom3> -->
<login></login>
</div>
<!-- 在被控制的 #app 外面，使用 tempalte 元素，定义组件的HTML结构 -->
<template id="tmp1">
<div>
<h1>这是通过 template 元素，在外部定义的组件结构，这个方式，有代码的提示和高亮</h1>
<span>Well done！</span>
</div>
</template>
<!-- 定义私有组件模板 -->
<template id="loginDiv">
<div>
<h1>这是自定义的login组件</h1>
<span>好啦好啦，我知道啦。</span>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component("mycom3", {
template: '#tmp1'
});
var app = new Vue({
el: "#app",
data: {
},
methods: {
},
filters: {
},
directives: {
},
components: { //定义实例内部私有组件
login: {
template: "#loginDiv"
}
},
beforeCreate() {
},
created() {
},
beforeMount() {
},
mounted() {
},
beforeUpdate() {
},
updated() {
},
beforeDestroy() {
},
destroyed() {
},
});
</script>
</body>
</html>
348
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
