一.组件注册
import
Vue
from
'vue'
function
capitalizeFirstLetter(
string) {
return
string.
charAt(
0).
toUpperCase() +
string.
slice(
1)
}
const requireComponent =
require.
context(
'.',
true,
/\.vue
$
/
//找到components文件夹下以.vue命名的文件
)
requireComponent.
keys().
forEach(
fileName
=> {
const componentConfig =
requireComponent(fileName)
let componentName =
null;
componentName =
capitalizeFirstLetter(
fileName.
replace(
/
^
\.\/\w+
\//,
'').
replace(
/\.\w+
$
/,
'')
//因为得到的filename格式是: './baseButton.vue', 所以这里我们去掉头和尾，只保留真正的文件名
);
if (
componentName.
search(
/
^
.\/+
.\w+
$
/) ==
0) {
componentName =
capitalizeFirstLetter(
fileName.
replace(
/
^
\.\//,
'').
replace(
/\.\w+
$
/,
''))
}
Vue.
component(componentName,
componentConfig.
default || componentConfig)
})
用的时候可以不用再components里面注册，可以只用使用，如：
<
template
>
<
div
id=
'Home'
>
<
List :
value=
'value'
label=
'密码'
placeholder=
"请填写密码" @
aaaa =
'aas' @
input=
'handleInput' @
focus=
'handleFocus'
></
List
>
</
div
>
</
template
>
二：父子组件的信息传递
可以不需要在子组件定义props，可以不用加：号
父组件：
<
template
>
<
div
id=
'Home'
>
<
List :
value=
'value'
label=
'密码'
placeholder=
"请填写密码" @
fucks =
'fuck' @
input=
'handleInput' @
focus=
'handleFocus'
></
List
>
</
div
>
</
template
>
<
script
>
export
default {
name:
'Home',
data() {
return {
value:
'你是我儿子',
}
},
methods: {
handleInput(
e) {
console.
log(e)
},
handleFocus(
e) {
console.
info(e)
},
fuck(
e) {
console.
log(e)
}
}
}
<
/
script
>
子组件：
<
template
>
<
div
>
{{$attrs}}
<
br
>
{{value}}
<
br
>
<
input :
value=
'value' :
placeholder=
"$attrs.placeholder" @
input=
'listeners.input'
>
<
br
>
<
input :
value=
'value' :
placeholder=
"$attrs.placeholder" @
input=
'listeners.focus'
>
<
div @
click =
'listeners.fucks'
>我是你爸爸
</
div
>
</
div
>
</
template
>
<
script
>
export
default {
data() {
return {
}
},
props: [
'value'],
methods: {},
computed: {
listeners() {
return {
...
this.
$listeners,
input:
event
=>
this.
$emit(
'input',
event.
target.
value),
fucks:
event
=>
this.
$emit(
'fucks',
event.
target.
innerHTML),
focus:
event
=>
this.
$emit(
'focus',
event.
target.
value),
}
}
}
}
<
/
script
>
三.利用 watch的immediate属性
一般我们对于在没有初始化的时候执行一次，然后监听它的变化如下这么写的
created() {
this.
fetchPostList()
},
watch: {
searchInputValue() {
this.
fetchPostList()
}
},
现在我们可以利用immediate属性
watch: {
searchInputValue: {
handler:
'fetchPostList',
immediate:
true
}
},
这样实现的效果和前面的一样
五.router组件的刷新
如你从xxx/a跳转到xxx/b会发现数据没有更新，原因是vue-router发现这是同一个组件，然后就复用了，所有你在created里面的内容不会更新，一般使用的监听方案来初始化数据，如：
data() {
return {
tableData:
false,
multipleTable:
null,
post:
null
}
},
watch: {
'$route': {
handler:
'resetData',
immediate:
true
}
},
methods: {
resetData() {
this.
tableData =
false
this.
multipleTable =
null
this.
post =
null
this.
getPost(
this.
$route.
params.
id)
},
getPost(
id) {}
},
解决可以解决，但是太麻烦了，so，我们这样整:
data() {
return {
tableData:
false,
multipleTable:
null,
post:
null
}
},
created() {
this.
getPost(
this.
$route.
params.
id)
},
methods() {
getPost(
postId) {
// ...
}
},
然后找到router-view 加上一个key值，这样就算是公用组件也可以刷新了，这里的key值用的就是他的路径，这个一般用于子路由，这样可以避免大量的重绘，如果你给app.vue加上，那么每次点击都会重绘一次，有些得不偿失了。
<
router-view
class=
"router-view" :
key=
"$route.fullPath"
></
router-view
>