$emit componente secundario pasa parámetros al componente principal
1. Los subcomponentes no pasan parámetros y los componentes principales no aceptan parámetros
// 子组件
<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. El componente secundario pasa un parámetro y el componente principal lo recibe sin parámetros formales
<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>
- El componente secundario pasa múltiples parámetros, que deben usarse
argumentscomo parámetros formales cuando los recibe el componente principal. argumentos es una matriz .
<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. El componente secundario pasa un parámetro, y el componente principal también agrega una propiedad propia cuando recibe el parámetro, luego el componente principal debe usar un parámetro formal $eventpara reemplazar el parámetro pasado por el componente secundario.
<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. Cuando el componente secundario pasa múltiples parámetros, el componente principal también agrega una propiedad propia al recibir los parámetros, entonces el componente principal necesita usar parámetros formales para argumentsreemplazar los múltiples parámetros pasados por el componente secundario.
<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 y $refs componente principal llama al método de componente secundario
<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>