什么是组件? 组件的出现,就是为了拆分Vue实例的的代码,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的的组件即可;
组件化和模块化的不同
模块化是从代码逻辑的角度进行划分的;
组件化是从UI界面角度进行划分的,前端的组件化,方便复用;
1.使用Vue.extend 来创建全局的Vue组件
<!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-2.4.0.js"></script>
</head>
<body>
<div id="app">
<my-com></my-com>
</div>
</body>
<script>
// 定义组件的第一种方式
var com1 = Vue.extend({
template: '<h3>这是一个用Vue.extend定义的组件</h3>'
});
Vue.component('myCom', com1);
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
</html>
01.png
2.
<!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-2.4.0.js"></script>
</head>
<body>
<div id="app">
<mycom2></mycom2>
</div>
</body>
<script>
// 直接使用组件
Vue.component('mycom2', {
template: '<h3>这是一个component组件</h3>'
});
var vm = new Vue({
el: '#app',
data: {},
methods: {},
});
</script>
</html>
3.
<!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-2.4.0.js"></script>
</head>
<body>
<div id="app">
<mycom2></mycom2>
</div>
<template id="teml">
<div>
<h1>这是一个component 在外部声明的组件</h1>
</div>
</template>
</body>
<script>
Vue.component('mycom2', {
template: '#teml'
});
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
</html>
私有组件
<!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-2.4.0.js"></script>
</head>
<body>
<div id="app">
<mycom></mycom>
<login></login>
</div>
<div id="vm">
<mycom></mycom>
<!-- <login></login> -->
<!-- login是#app这个实例的私有属性 -->
</div>
<template id="tel">
<div>
<h3>这是一个外部定义的component啊啊啊</h3>
</div>
</template>
</body>
<script>
Vue.component('mycom', {
template: '#tel',
});
var vm = new Vue({
el: "#app",
data: {},
methods: {},
components: {
login: {
template: '<h2>这是一个login私有组件</h2>',
}
}
});
var vm = new Vue({
el: '#vm',
data: {},
methods: {}
});
</script>
</html>
私有组件运用到其他组件中报错
02.png
网友评论