子组件调用父组件中的方法
我把子组件注册成了全局组件,所以在父页面中不用引入直接使用就可以了。
import son from '@/components/son'
Vue.component(son.name,son)
方法一 ,使用this.$parent.event
父组件
<template>
<div>
<son></son>
</div>
</template>
<script>
export default {
methods:{
father() {
console.log('我是父组件')
}
}
}
</script>
子组件
<template>
<div>
<button @click="son">点击</button>
</div>
</template>
<script>
export default {
name:'son',
methods:{
son() {
this.$parent.father()
}
}
}
</script>
方法二 ,使用$emit
父组件
<template>
<div>
<son @father="father"></son>
</div>
</template>
<script>
export default {
methods:{
father() {
console.log('我是父组件')
}
}
}
</script>
子组件
<template>
<div>
<button @click="son">点击</button>
</div>
</template>
<script>
export default {
name:'son',
methods:{
son() {
this.$emit('father')
}
}
}
</script>
方法三,使用props
父组件
<template>
<div>
<son :father="father"></son>
</div>
</template>
<script>
export default {
methods:{
father() {
console.log('我是父组件')
}
}
}
</script>
子组件
<template>
<div>
<button @click="son">点击</button>
</div>
</template>
<script>
export default {
name:'son',
props: {
father: {
type: Function,
default: null
}
},
methods:{
son() {
if(this.father) {
this.father()
}
}
}
}
</script>
父组件调用子组件中的方法
使用ref
父组件
<template>
<div>
<son ref="child"></son>
<button @click="father">点击</button>
</div>
</template>
<script>
export default {
methods:{
father() {
this.$refs.child.son()
}
}
}
</script>
子组件
<template>
<div>
</div>
</template>
<script>
export default {
name:'son',
methods:{
son() {
console.log('我是子组件')
}
}
}
</script>
子组件向父组件传值
使用$emit
父组件
<template>
<div>
<son @son="father"></son>
<p>{{name}}</p>
</div>
</template>
<script>
export default {
data() {
return {
name:''
}
},
methods: {
father(data) {
this.name = data
}
}
}
</script>
子组件
<template>
<div>
<button @click="son">按钮</button>
</div>
</template>
<script>
export default {
name:'son',
data() {
return {
name:'我是子组件'
}
},
methods: {
son() {
this.$emit("son",this.name)
}
}
}
</script>
父组件向子组件传值
使用props
父组件
<template>
<div>
<son :name="name"></son>
</div>
</template>
<script>
export default {
data() {
return {
name:'我是父组件'
}
}
}
</script>
子组件
<template>
<div>
{{name}}
</div>
</template>
<script>
export default {
name:'son',
props: {
name: String,
required: true
},
}
</script>