Vue学习——组件基础
Posted sadoshi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue学习——组件基础相关的知识，希望对你有一定的参考价值。
概述
Vue初学者遇到的第一个难题应该就是组件。Vue中组件又是使用非常频繁的的功能。虽然官网已经写得不错，但相信也有很多新手不太适应官网的描述方式，因此写一下自己的理解。
单页面实现
很多例子会以一个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>还有很多组件注册的细节可以看官网描述，这里只是抛砖引玉。
小结
本文展示了Vue中组件的基本使用方式，包括单页面和Vue工程两种方式。关于父子组件传值，slot相关的内容，将在后面继续展示。
以上是关于Vue学习——组件基础的主要内容，如果未能解决你的问题，请参考以下文章