vue中使用$emit子组件给父组件传参以及使用ref和$refs父组件调用子组件方法
$emit子组件给父组件传参
1.子组件不传递参数，父组件也不接受参数
// 子组件
<template>
<div>
<jc-button @click="testEmit">click</jc-button>
</div>
</template>
<script>
export default {
name: 'Children',
components: {},
props: {},
data() {
return {}
},
methods: {
testEmit() {
this.$emit('test')
}
}
}
</script>
// 父组件
<template>
<div>
<children @test="test" />
</div>
</template>
<script>
import children from '@/views/children.vue'
export default {
name: 'Father',
components: { children },
methods: {
test() {
console.log('test');
}
}
}
</script>
2、 子组件传递一个参数，父组件接收时不带形参
<template>
<div>
<jc-button @click="testEmit">click</jc-button>
</div>
</template>
<script>
export default {
name: 'Children',
components: {},
props: {},
data() {
return {}
},
methods: {
testEmit() {
this.$emit('test', 'this is children')
}
}
}
</script>
<template>
<div>
<children @test="test" />
</div>
</template>
<script>
import children from '@/views/children.vue'
export default {
name: 'Father',
components: { children },
props: {},
data() {
return {}
},
methods: {
test(val) {
console.log(val); //this is children
}
}
}
</script>
- 子组件传递多个参数，父组件接收时需要使用
arguments作为形参。arguments是一个数组。
<template>
<div>
<jc-button @click="testEmit">click</jc-button>
</div>
</template>
<script>
export default {
name: 'Children',
components: {},
props: {},
data() {
return {}
},
methods: {
testEmit() {
this.$emit('test', 'this is children1', 'this is children2')
}
}
}
</script>
<template>
<div>
<children @test="test(arguments)" />
</div>
</template>
<script>
import children from '@/views/children.vue'
export default {
name: 'Father',
components: { children },
props: {},
data() {
return {}
},
methods: {
test(val) {
console.log(val); // Arguments { 0: "this is children1", 1: "this is children2"}
console.log(val[0]); // this is children1
console.log(val[1]); // this is children2
}
}
}
</script>
4、 子组件传递一个参数，父组件在接收参数时还加上了自己的一个属性，那么父组件需要使用形参$event 来替代子组件传递的参数。
<template>
<div>
<jc-button @click="testEmit">click</jc-button>
</div>
</template>
<script>
export default {
name: 'Children',
components: {},
props: {},
data() {
return {}
},
methods: {
testEmit() {
this.$emit('test', 'this is children')
}
}
}
</script>
<template>
<div>
<children @test="test($event, 'father')" />
</div>
</template>
<script>
import children from '@/views/children.vue'
export default {
name: 'Father',
components: { children },
props: {},
data() {
return {}
},
methods: {
test(childParam, fatherParam) {
console.log(childParam); // this is children
console.log(fatherParam); // father
}
}
}
</script>
5、 子组件传递多个参数时，父组件在接收参数时还加上了自己的一个属性，那么父组件需要使用形参arguments 来替代子组件传递的多个参数。
<template>
<div>
<jc-button @click="testEmit">click</jc-button>
</div>
</template>
<script>
export default {
name: 'Children',
components: {},
props: {},
data() {
return {}
},
methods: {
testEmit() {
this.$emit('test', 'this is children1', 'this is children2')
}
}
}
</script>
<template>
<div>
<children @test="test(arguments, 'father')" />
</div>
</template>
<script>
import children from '@/views/children.vue'
export default {
name: 'Father',
components: { children },
props: {},
data() {
return {}
},
methods: {
test(childParam, fatherParam) {
console.log(childParam); // Arguments { 0: "this is children1", 1: "this is children2"}
console.log(childParam[0]); // this is children1
console.log(childParam[1]); // this is children2
console.log(fatherParam); // father
}
}
}
</script>
ref 和 $refs父组件调用子组件方法
<template>
<div>
<children ref="childRef" />
<jc-button @click="test">click</jc-button>
</div>
</template>
<script>
import children from '@/views/children.vue'
export default {
name: 'Father',
components: { children },
props: {},
data() {
return {}
},
methods: {
test() {
this.$refs.childRef.testRef() // this is child
}
}
}
</script>
<template>
<div>
child
</div>
</template>
<script>
export default {
name: 'Children',
components: {},
props: {},
data() {
return {}
},
methods: {
testRef() {
console.log('this is child');
}
}
}
</script>