hello world
好久没有写博客了,今天看到掘金有人写总结下Vue组件方法标题,回想了一下总结的知识,感觉自己有些遗忘,就写下此篇复习下,结果发现之前总结方法都能写出来。这些比较以前的了,最近又好久没学习。如果还有什么其他方法,求赐教。代码是纯Markdown写的,可能代码会写错。如果看到的也麻烦提个醒
常用的方法总结下
- $emit
- $parent
- prop
- vuex(vuex代码比较麻烦,不写了,说下步骤吧 dispatch:actions=>commit:mutations)
$parent方法
父组件
<template>
<div>
<child></child>
</div>
</template>
<script>
import child from '@/components/child';
export default {
components: {
child
},
methods: {
fatherMethod() {
console.log('father组件');
}
}
}
</script>
子组件
<template>
<div @click="activeBtn"> </div>
</template>
<script>
export default {
methods: {
activeBtn() {
this.$parent.fatherMethod()
}
}
}
</script>
$emit方法
父组件
<template>
<div>
<child @callFather="activeSon"></child>
</div>
</template>
<script>
import child from '@/components/child';
export default {
components: {
child
},
methods: {
fatherMethod() {
console.log('father组件');
},
activeSon(){
this.fatherMethod()
}
}
}
</script>
子组件
<template>
<div @click="activeBtn"> </div>
</template>
<script>
export default {
methods: {
activeBtn() {
this.$emit("callFather")
}
}
}
</script>
$prop方法
父组件
<template>
<div>
<child :activeSon="fatherMethod()"></child>
</div>
</template>
<script>
import child from '@/components/child';
export default {
components: {
child
},
methods: {
fatherMethod() {
console.log('father组件');
}
}
}
</script>
子组件
<template>
<div @click="activeBtn"> </div>
</template>
<script>
export default {
props:{
activeSon: {
type: Function,
default: null
}
},
methods: {
activeBtn() {
this.activeSon()
}
}
}
</script>