created(){
 this.fetchPostList()
},
watch: {
 searchInputValue(){
 this.fetchPostList()
 }
}

watch: {
 searchInputValue:{
 handler: 'fetchPostList',
 immediate: true
 }
}

import BaseButton from './baseButton'
import BaseIcon from './baseIcon'
import BaseInput from './baseInput'

export default {
 components: {
 BaseButton,
 BaseIcon,
 BaseInput
 }
}

<BaseInput
 v-model="searchText"
 @keydown.enter="search"
/>
<BaseButton @click="search">
 <BaseIcon name="search"/>
</BaseButton>

import Vue from 'vue'

function capitalizeFirstLetter(string) {
 return string.charAt(0).toUpperCase() + string.slice(1)
}

const requireComponent = require.context(
 '.', false, /\.vue$/
 //找到components文件夾下以.vue命名的文件
)

requireComponent.keys().forEach(fileName => {
 const componentConfig = requireComponent(fileName)

 const componentName = capitalizeFirstLetter(
 fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
 //因為得到的filename格式是: './baseButton.vue', 所以這里我們?nèi)サ纛^和尾，只保留真正的文件名
 )

 Vue.component(componentName, componentConfig.default || componentConfig)
})

data() {
 return {
 loading: false,
 error: null,
 post: null
 }
}, 
watch: {
 '$route': {
 handler: 'resetData',
 immediate: true
 }
},
methods: {
 resetData() {
 this.loading = false
 this.error = null
 this.post = null
 this.getPost(this.$route.params.id)
 },
 getPost(id){

 }
}

data() {
 return {
 loading: false,
 error: null,
 post: null
 }
},
created () {
 this.getPost(this.$route.params.id)
},
methods () {
 getPost(postId) {
 // ...
 }
}

<router-view :key="$route.fullpath"></router-view>

<template>
 <li
 v-for="route in routes"
 :key="route.name"
 >
 <router-link :to="route">
 {{ route.title }}
 </router-link>
 </li>
</template>


 ERROR - Component template should contain exactly one root element. 
 If you are using v-if on multiple elements, use v-else-if 
 to chain them instead.

functional: true,
render(h, { props }) {
 return props.routes.map(route =>
 <li key={route.name}>
 <router-link to={route}>
 {route.title}
 </router-link>
 </li>
 )
}

//父組件
<BaseInput 
 :value="value"
 label="密碼" 
 placeholder="請?zhí)顚懨艽a"
 @input="handleInput"
 @focus="handleFocus>
</BaseInput>

//子組件
<template>
 <label>
 {{ label }}
 <input
 :value="value"
 :placeholder="placeholder"
 @focus=$emit('focus', $event)"
 @input="$emit('input', $event.target.value)"
 >
 </label>
</template>

<input
 :value="value"
 v-bind="$attrs"
 @input="$emit('input', $event.target.value)"
 >

<input
 :value="value"
 v-bind="$attrs"
 v-on="listeners"
>

computed: {
 listeners() {
 return {
 ...this.$listeners,
 input: event => 
 this.$emit('input', event.target.value)
 }
 }
}