寫一個vue組件
我下面寫的是以.vue結尾的單文件組件的寫法，是基於webpack構建的項目。如果還不知道怎么用webpack構建一個vue的工程的，可以移步到vue-cli。
一個完整的vue組件會包括一下三個部分：
- template：模板
- js： 邏輯
- css ： 樣式
每個組件都有屬於自己的模板，js和樣式。如果將一個頁面比喻成一間房子的話，組件就是房子里的客廳、卧室、廚房、廁所。如果把廚房單獨拿出來的話，組件又可以是刀、油煙機...等等。就是說頁面是由組件構成的，而組件也可以是組件構成的。這樣就可以非常的靈活，耦合性也非常的低。
首先來看看一個組件在不是在.vue文件內的寫法：
Vue.component('simple-counter', {
template: '<div id="inputBox"><input type="text"></div>',
data () { // 數據
return {
counter: 0
}
},
methods: {
// 寫點方法
},
created () {
// 生命鈎子
},
computed: {
// 計算屬性
}
})
template是用來干嘛的呢？
<template>
<div id="inputBox">
<input type="text">
</div>
</template>
<!--
template就是這個組件的html，也就是下面部分（vue-loader會將template標簽下的內容解析出來）：
-->
<div id="inputBox">
<input type="text">
</div>
<!--
對應原生寫法的話，就是template內的dom字符串
-->
js部分
export default {
data () {
return {
counter: 0
}
},
methods: {
// 方法
},
created () {
// 生命鈎子
},
computed: {
// 計算屬性
}
}
// 在這里很明顯js部分就是對應的原生寫法內的非template部分了。
// export default這個是es6的模塊寫法，不懂的可以先去了解es6的模塊化
css部分
<style lang="scss" scoped>
...樣式
</style>
<!--這里的你可以使用scss（CSS擴展語言）只要安裝"sass-loader"和"node-sass"這兩個npm包就好了，vue-cli已經配好相關參數了。如果想使用less或其它css擴展語音，只要裝好各自的編譯包就好了。而scoped是讓css的作用域只在該文件下。-->
引入
要怎么在其它組件引用該組件？
組件一（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）
<template>
<div class="box">
<v-button :text="text" ref="button" @event1="changeText"></v-button> <!--使用組件並傳值（text）-->
</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獲取父組件的實例。