什么是组件
组件的出现，能够有效的减轻Vue的代码量，让代码更具有模块化，需要什么功能就去调用对应的组件，一个组件就完成一种单一的功能
为什么使用组件
因为如果不使用组件，虽然JavaScript的方法也能完成但是如果调用多次就要多次复制粘贴，代码显得非常冗余，使用组件能如同函数一般方便简洁多次复用
怎么使用组件
一、 组件的创建
1.1全局注册组件
有三种注册方式
<script>
var com=Vue.extend({
template:"<h1>这是使用构造器创建的</h1>"
</script>
<script>
Vue.component('mycom',{
template:"<h2>这是字符串创建的</h2>"
})
</script>
<div>
<template id="tmp1">
<p>这是通过HTML标签创建的</p>
</template>
</div>
<script>
Vue.component("mycom",{
template: '#tmp1'
})
</script>
1.2局部注册组件
<script>
new Vue=({
el:'#app',
data:{},
components: {
mycom :{
template: "<h1>这是局部组件注册</h1>"
}
}
})
</script>
2.1组件的数据和方法
组件中还有像Vue实例一样的选项，如data，computed，methods。其中data属性跟Vue实例对象中的data不一样，实例对象中的data为一个对象，组件中的data必须是一个函数，所以必须将数据以return的方式返回。
<script>
Vue.component('mycom',{
template: "{{msg}}",
data:function(){
return {
msg:"<h1>data返回方式</h1>"
}
}
})
</script>
3.1组件中的props属性
组件的作用不仅是模板的复用，还能进行组件之间的数据交换也就是通信父组件中可以包含子组件，父组件传递数据给子组件，子组件收到后根据参数的不同渲染不同的内容或者操作，这个过程就是通过props属性来实现的。
- Vue组件注册及使用方法
- 部分代码展示：
<body>
<a href="/2023/04/27/Vue组件三问/"><button class="back">回到博客</button></a>
<div id="example">
<!-- 组件的调用，象使用HTMl标签一样使用组件，可以重复使用 必用在VUE接管区内部使用-->
<my-article title="学院新闻" :cnt="6" array="true"></my-article>
<my-article :title="vmtitle[1]" :listitem="vmlistxuesheng" :array="false"></my-article>
</div>
<script type="text/javascript">
//注册全局组件, 完成组件的调用
Vue.component('my-article', {
props: ['title', 'listitem', 'cnt', 'array'], //向组件传入形式参数定义，相当于标签的属性的定义
// \符号是续行符，当一行字符太多，要换行书写排版更好看，多行相当于一行。
//组件内模板使用的变量是内部定义的props参数变量,调用时再换成真实的值
template: '<div> \
<h1>{{title}}</h1> \
<ul v-if="array"> \
<li v-for="item in cnt" >{{title}}{{item}}</li> \
</ul> \
<ul v-else > \
<li v-for="item in listitem" >{{item}}</li> \
</ul> \
</div>',
methods: {
}
})
//创建根实例
var vm = new Vue({
el: '#example',
data: {
vmtitle: ['学院新闻', '学生新闻', '教师新闻'],
vmlistxuesheng: ['学生新闻1', '学生新闻2', '学生新闻3', '学生新闻4'],
}
})
</script>
</body>
欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 1701220998@qq.com
