Vue学习之全局和私有组件小结（七）
程序员文章站
2023-01-01 14:24:18
一、组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用相应的组件即可。 二、组件和模块： 1、模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的只能单一； 2、组块化：是从UI界面的角度进 ......
一、组件：
组件的出现，就是为了拆分vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用相应的组件即可。
二、组件和模块：
1、模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的只能单一；
2、组块化：是从ui界面的角度进行划分的；前端的组块化，方便ui组件的重用。
三、定义全局组件的方式：
三种方式：
<!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>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 如果要使用组件，直接把组件的名称，以html标签的形式，引入到页面中即可 -->
<mycom1></mycom1>
</div>
<!-- 3.在被控制的 #app外面，使用 template 元素，定义组件的html模板结构-->
<template id="tmp1">
<div>
<h1>
这是通过
template元素，在外部定义的组件结构，这个方式，有代码的智能提示和高亮
</h1>
<h4>好用，不错</h4>
</div>
</template id="tmp2">
<h2>
这是私有的 login 组件
</h2>
<template>
</template>
<script>
vue.component("mycom1", {
template: "#tmp1"
});
// 1.1 使用 vue.extend 来创建全局的vue组件
// var com1 = vue.extend({
// 通过template 属性，指定了组件要展示的html结构
// template: "<h3>这是使用 vue.extend 创建的组件<h3>"
// });
// 1.2 使用 vue.component('组件的名称'，创建出来的组件模板对象)
// 如果使用 vue.component 定义全局组件的时候，组件的名称使用了驼峰命名，则在引用组件的时候，
// 需要把大写的驼峰改成小写的字母，同时，两个单词之前，使用 - 连接；
// 如果不使用驼峰，则直接拿名称来使用即可；
// vue.component("mycom1", com1);
// 2. vue.component 第一个参数：组件的名称，将来在引用组件的时候，就是一个标签的形式来引入它的
// 第二个参数：vue.extend 创建的组件，其中 template 就是组件将来要展示的html内容。
// 相当于第一种方式的简写
// vue.component(
// "mycom1",
// vue.extend({
// //注意：不论是哪种方式创建出来的组件，组件的 template 属性指向的模板内容，必须有且只能有唯一的一个元素
// template:
// "<div><h3>这是使用 vue.extend 创建的组件<h3><span>123</span></div>"
// })
// );
var vm = new vue({
el: "#app",
data: {},
methods: {},
filters: {},
directives: {},
components: { //定义实例的内部私有组件的
login: {
template: "#tmp2"
}
}
});
</script>
</body>
</html>
四、定义私有的组件：如上图代码中的 tmp2 ;
五、组件内可以有data数据，但其是一个有return的function方法。
<!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>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 如果要使用组件，直接把组件的名称，以html标签的形式，引入到页面中即可 -->
<mycom1></mycom1>
</div>
<script>
vue.component("mycom1", {
template: "<h1>这是全局组件-----{{ msg }}</h1>",
data: function() {
return {
msg: "这是组件的中data定义的数据"
};
}
});
var vm = new vue({
el: "#app",
data: {},
methods: {},
filters: {},
directives: {}
});
</script>
</body>
</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>组件</title>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<counter></counter>
<hr />
<counter></counter>
<hr />
<counter></counter>
<!-- 如果要使用组件，直接把组件的名称，以html标签的形式，引入到页面中即可 -->
</div>
<template id="tmp1">
<div>
<input type="button" value="+1" @click="increment" />
<h3>{{ count }}</h3>
</div>
</template>
<script>
var dataobj = { count: 0 };
//这是一个计数器的组件，身上有个按钮，每当点击按钮，让 data 中的 count 值 +1
vue.component("counter", {
template: "#tmp1",
data: function() {
return {
count: 0
};
},
methods: {
increment() {
this.count++;
}
}
});
var vm = new vue({
el: "#app",
data: {},
methods: {},
filters: {},
directives: {}
});
</script>
</body>
</html>