$emit untergeordnete Komponente übergibt Parameter an die übergeordnete Komponente
1. Unterkomponenten übergeben keine Parameter und übergeordnete Komponenten akzeptieren keine Parameter
// 子组件
<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. Die untergeordnete Komponente übergibt einen Parameter, und die übergeordnete Komponente empfängt ihn ohne formale Parameter
<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>
- Die untergeordnete Komponente übergibt mehrere Parameter, die als formale Parameter verwendet werden müssen,
argumentswenn die übergeordnete Komponente sie empfängt. Argumente ist ein Array .
<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. Die untergeordnete Komponente übergibt einen Parameter, und die übergeordnete Komponente fügt auch eine eigene Eigenschaft hinzu, wenn sie den Parameter empfängt. Dann muss die übergeordnete Komponente einen formalen Parameter verwenden, um den von der untergeordneten Komponente übergebenen Parameter zu $eventersetzen.
<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. Wenn die untergeordnete Komponente mehrere Parameter übergibt, fügt die übergeordnete Komponente beim Empfang der Parameter auch eine eigene Eigenschaft hinzu, dann muss die übergeordnete Komponente formale Parameter verwenden, um die argumentsmehreren von der untergeordneten Komponente übergebenen Parameter zu ersetzen.
<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>
Die übergeordnete Komponente ref und $refs ruft die Methode der untergeordneten Komponente auf
<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>