Vue学习（一）——组件基础_实验一 vue组件基础-CSDN博客

本文链接：https://blog.csdn.net/sadoshi/article/details/118426261

概述

Vue初学者遇到的第一个难题应该就是组件。Vue中组件又是使用非常频繁的的功能。虽然官网已经写得不错，但相信也有很多新手不太适应官网的描述方式，因此写一下自己的理解。

我当初接触Vue的时候是半路出家，我原本是搞C++的，后来转Java，然后那时候Vue+springcloud开始火起来。我当时帮一个师兄的创业公司兼职做个小开发，在主程序员搭好框架，UI已经生成了基本代码之后，我只是负责写业务逻辑。当年别说Vue了，JS还算凑合，ES6根本不清楚。遇到不懂的东西就搜一下，其实很多不懂的知识涉及JS和ES6基础的，反而还觉得Vue的文档咋写得不清不楚（知乎看下还真有不少人这么抱怨）。所以学习Vue的同时，要不断稳固JS和ES6基础，然后学习Vue也要一步一步来，别连组件还没太懂怎么用，就研究父子组件交互、slot等问题，这种情况下看文档肯定看得一头雾水。

单页面实现

很多例子会以一个webpack工程做例子，但这对初学者来说并不友好。初学者可能本身对webpack项目就不太理解，还要在这基础上学Vue就太难了。所以建议初学者先从单页面去理解Vue，然后再转向webpack工程。

首先创建一个页面test1.html，复制下面代码：

<html>
<head>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
</head>

<body>
	<div id="app">
		<button-count :count="2"></button-count>
	</div>

	<script>
		Vue.component('button-count', {
			props: {
				count : Number,
			},
			template: '<button v-on:click="countFun">You clicked me {{ count }} times.</button>',
			methods : {
				countFun(){
					this.count++;
				}
			}
		})
		
		var app = new Vue({
			el: '#app',
		});
	</script>

</body>
</html>

第3行引入vue，7-9行是相关的html页面，这里我们将展示一个自定义组件button-count，“:count=2“表示是要往组件的count属性传值为2。12-22行为定义一个组件并设置注册其名为“button-count”，这样我们才能使用<button-count>标签的方式来使用组件。13-15行组件的props属性用于组件接收外部的传值。16行template属性定义组件的模版，即要展示什么。例如这里我们定义模版为一个button按钮，并且点击按钮会触发countFun函数，按钮上会显示count的值。18-20行定义countFun的作用是自增1。

接着通过chrome或者firefox打开test1.html页面：

我们每点一次，可以看到数字在自增1。这样我们自定义的组件就实现了。

Vue工程中实现

一般来说，组件最终还是要用在工程中，不可能所有组件的逻辑写到一个页面上。这里准备通过工程的方式把上面的例子再实现一遍。

如果懂得新建vue项目的同学可以略过，不懂的可以参照下面的步骤：

新建项目

如果没安装vue-cli的同学先安装之：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

然后可以通过vue --version命令查看安装情况：

接着vue create project1创建项目，并选择“Default([Vue 2] babel, eslint)”。（主要是考虑简单点，手动选择也是可以的）。

接着可以看到已经创建了project1目录，点进去，看到已经给我们创建好项目了：

接着在该目录下执行npm install或yarn安装项目需要依赖的包：

npm install
# OR
yarn

接着执行npm run serve，可以看到项目启动：

浏览器打开localhost:8080查看：

至此成功创建一个简单Vue项目。

设计组件模版

vue默认方式新建的项目是自带了名为“HelloWorld”的组件，src/components目录下。这里我们不需要，可以删除它。接下来在该目录下创建ButtonCount.vue文件：

<template>
  <div>
    <button v-on:click="countFun">You clicked me {{ count }} times.</button>
  </div>
</template>

<script>
export default {
  name: "ButtonCount",
  props: {
    count: Number,
  },
  methods: {
    countFun() {
      this.count++;
    },
  },
};
</script>

与之前的代码区别不大，注意第9行这里给组件的命名为ButtonCount，这个命名和以后父组件引用子组件的标签有关，以后父组件引用这个子组件的标签就是<button-count>。如果命名为MyButton，则父组件引用时的标签为<my-button>.

接下来设计主页面App.vue，我们删除无用的代码，仅引用自定义的ButtonCount组件：

<template>
  <div id="app">
    <button-count :count="2"></button-count>
  </div>
</template>

<script>
import ButtonCount from './components/ButtonCount'

export default {
  name: 'App',
  components: {
    ButtonCount
  }
}
</script>

第8行要import自定义的ButtonCount组件。12-14行定义想要使用的组件。

然后运行npm run serve

浏览器打开localhost:8080/

可以看到效果是一样的。

关于组件名的大小写

可能很多读者很疑惑，为什么组件名一会使用ButtonCount，一会使用button-count。因为在DOM中，大小写是不区分的，在DOM上要会转成kebab-case，即button-count。当然在javascript中，也可以使用kebab-case形式，这个看个人习惯了。

关于全局注册和局部注册

实际上刚才单页面实现和工程实现，分别使用了组件的全局注册和局部注册。使用Vue.component这是全局注册，使用这个之后，在其后创建的任何根实例(new Vue)模版中都可以使用：

Vue.component('my-component-name', {
  // ... 选项 ...
})

除此之外还有一种是局部注册，只会对注册的Vue实例有效。例如以下形式：

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

例如我们可以把单页面实现的例子改成局部注册的形式：

<html>
<head>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
</head>

<body>
	<div id="app">
		<button-count :count="2"></button-count>
	</div>

	<script>
		var buttonCount = {
			props: {
				count : Number,
			},
			template: '<button v-on:click="countFun">You clicked me {{ count }} times.</button>',
			methods : {
				countFun(){
					this.count++;
				}
			}
		}
		
		var app = new Vue({
			el: '#app',
			components: {
				'button-count' : buttonCount,
			},
		});
	</script>

</body>
</html>

还有很多组件注册的细节可以看官网描述，这里只是抛砖引玉。