使用 components 定义私有组件

<!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>Title</title>
<script src="js/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<!--<login></login>-->
</div>

<div id="app2">
<!--私有组件只能在定义的 id 上执行-->
<login></login>
</div>
<template id="temp1">
<h1>这是 components 定义的私有组件</h1>
</template>

<script>
const vm=new Vue({
el:'#app',
data:{},
methods:{}
});
const vm2=new Vue({
el:'#app2',
//属性
data:{},
methods:{},
filter:{},
directives:{},
components:{ //定义实例内部私有组件
login:{
template:'#temp1'
}
},
//方法
beforeCreate(){},
created(){},
beforeMount(){},
mounted(){},
beforeUpdate(){},
update(){},
beforeDestroy(){},
destroyed(){},
})
</script>
</body>
</html>

猜你喜欢

转载自www.cnblogs.com/lujieting/p/10447961.html