有时候会有这么一种需求,根据一段html字符串获取其中img或者a标签的链接,闲来无事,写了一个。
1 | function findLink(text, type) { |
一花一世界
1 | function findLink(text, type) { |
Vuex是vue的状态管理工具,能够集中管理所有组件得状态,并能够追踪到状态的变更。
以上就是vuex的基本用法,注入到vue实例后就可以使用了
在组件中通过this.$store访问vuex
更详细的使用方法详见。
后续将会对vuex的源码进行解析。
当子组件依赖于父组件数据,且需要在子组件中改变状态时,是不能在子组件中直接进行更改的,而是需要事件的方式,子组件通知父组件进行修改,但是当子组件层级过深,props传递会显得臃肿复杂和难以维护,因此,inheritAttrs + $attrs + $listeners应用而生了。
以上是我们遇到的场景,父组件向子组件传递状态,子组件通知父组件,而且所涉及的层级较深。
父组件A:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30<template>
<div class="hello">
<child1 @child1Test='child1Listener'
@child2Test='child2Listener'
:child1Msg=child1Msg
:child2Msg=child2Msg></child1>
</div>
</template>
<script>
import child1 from './child1'
export default {
components: {
child1
},
data () {
return {
child1Msg: 'child1Msg',
child2Msg: 'child2Msg',
}
},
methods: {
child1Listener () {
console.log('child1Listener....')
},
child2Listener () {
console.log('child2Listener...')
}
}
}
</script>
子组件child1:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29<template>
<div>
{{child1Msg}}
<button @click="emit1">child1 event</button>
<child2 v-bind="$attrs" v-on="$listeners"></child2>
</div>
</template>
<script>
import child2 from './child2'
export default {
data () {
return {
msg: 'Welcome child1'
}
},
props: ['child1Msg'],
inheritAttrs: false,
components: {
child2
},
methods: {
emit1 () {
console.log(this.$attrs, this.$listeners)
this.$emit('child1Test');
}
}
}
</script>
子组件child2:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23<template>
<div >
{{child2Msg}}
<button @click="emit2">child2 event</button>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Welcome to child2'
}
},
props:['child2Msg'],
inheritAttrs:false,
methods:{
emit2(){
console.log(this.$attrs, this.$listeners)
this.$emit('child2Test')
}
}
}
</script>
当分别点击child1event和child2event的时候,我们看看控制台的输出:
$attrs
包含了父作用域中不被认为 (且不预期为) props 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 props 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind=”$attrs” 传入内部组件——在创建更高层次的组件时非常有用。
$listeners
包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on=”$listeners” 传入内部组件——在创建更高层次的组件时非常有用。