前端学习笔记系列一：2 Vue的单文件组件

（1）非单文件vue组件和单文件vue组件的一般写法

一个完整的vue组件会包括三个部分：一是template模板部分，二是js程序逻辑部分，三是css样式部分。每个组件都有属于自己的模板，js和样式。如果将一个页面比喻成一间房子的话，组件就是房子里的客厅、卧室、厨房、厕所。如果把厨房单独拿出来的话，组件又可以是刀、油烟机...等等。就是说页面是由组件构成的，而组件也可以是组件构成的。这样就可以非常的灵活，耦合性也较低。

先来看看，非单文件vue组件的一般写法，template就是这个组件的html， vue-loader会将template标签下的内容解析出来。

Vue.component('simple-counter', {

template: '<div id="inputBox"><input type="text"></div>',

data () {         // 数据

return {

counter: 0

}

},

methods: {// 写点方法

},

created () {// 生命钩子

},

computed: {// 计算属性

}…

})

再来看看，单文件vue组件：

<!—1.template部分，就是这个组件的html，也就是下面部分（vue-loader会将template标签下的内容解析出来）-->

<template>

<div id="inputBox">

<input type="text">

</div>

</template>

<!—2.JS部分>

export default {

data () {

return {

counter: 0

}

},

methods: { // 方法

},

created () { // 生命钩子

},

computed: { // 计算属性

}

}

<!—3.css部分，可以使用scss（CSS扩展语言）只要安装"sass-loader"和"node-sass"这两个npm包就好了，vue-cli已经配好相关参数了。如果想使用less或其它css扩展语言，只要装好各自的编译包就好了。而scoped是让css的作用域只在该文件下。-->

<style lang="scss" scoped>

...样式

</style>

（2）单文件vue组件使用方法

首先定义了一个button组件button.vue：

<template>

<div class="button">

<button @click="onClick">{{text}}</button>

</div>

</template>

<script>

export default {

props: ['text'],          // 获取父组件的传值

data () {

return {

}

},

methods: {

onClick () {

console.log('点击了子组件')

// 通过触发自定义事件修改父组件传递的text

this.$emit('event1', '我修改了text')

}

}

}

</script>

<style lang="scss" scoped>

.button {

button {

width: 100px;

}

}

</style>

然后在box.vue组件中调用button.vue：

<template>

<div class="box">

<v-button :text="text" ref="button" @event1="changeText"></v-button>

</div>

</template>

<script>

import Button from './button.vue'     // 引入子组件

export default {

components: {

'v-button': Button

},

data () {

return {

text: '按键的name'

}

},

methods: {

changeText (value) {         // 自定义事件修改text的值

this.text = value

}

}

}

</script>

这里box.vue里引入了button.vue的组件，并通过components注册，在box.vue使用时只要使用注册时候的名称即可。父组件向子组件传递数据可以通过prop向子组件传值。子组件和父组件的交互其实还有很多，例如子组件要怎么修改父组件传递的值？因为vue的数据是单向的，所以子组件是不允许修改父组件的值的，官方是通过事件的形式修改的，就是父组件在子组件绑定一个自定义事件v-on:event1="event1",然后子组件通过this.$emit('event1')触发修改。可以理解为修改父组件传递的值一定要发生在父组件所在的作用域内。

父组件怎么获取子组件的实例这里父组件可以在子组件定义ref，在通过this.$refs.xxx获取对应的子组件实例。而子组件可通过this.$parent获取父组件的实例。