Vue2中的父子组件传参:
父传子
props：在父组件中，给子组件绑定一个自定义属性，在子组件中，通过props进行接收
子传父
自定义事件：在父组件中，给子组件绑定一个自定义事件，绑定事件的值为接收参数的函数，在子组件中，通过$emit发送数据
Vue3中的父子组件传参:
vue3中，新增了setup语法糖，父组件中引入子组件后，不需要注册可直接使用。父传子时，子组件中通过defineProps方法接收，子传父时，子组件中通过defineEmits方法发送。
Vue2父子组件传值
vue2父传子
在父组件中的子标签中定义一个 ：属性名=属性值，在子组件中用props接收
父组件：
<template>
<div>
<div>父组件</div>
<sonOne :msg="msg"></sonOne>
</div>
</template>
<script>
import sonOne from "@/components/sonOne";
export default {
name: "fatherView",
components:{
sonOne
},
data(){
return{
msg:'父组件传到子组件的值'
}
}
}
</script>
<style scoped>
</style>
子组件：
<template>
<div>
子组件
{{msg}}
</div>
</template>
<script>
export default {
name: "sonOne",
props:{
msg:[String,Number],
},
created() {
console.log(this.msg)
}
}
</script>
<style scoped>
</style>
vue2子传父
在父组件的子标签中写自定义事件，在子组件中用this.$emit(‘自定义事件名’，传递的值)传值
父组件：
<template>
<div>
父组件
<sonTwo @change="change"></sonTwo>
</div>
</template>
<script>
import sonTwo from "@/components/sonTwo";
export default {
name: "fatherOneView",
components: {
sonTwo
},
methods:{
change(data){
console.log(data)
}
}
}
</script>
<style scoped>
</style>
子组件：
<template>
<div>
子组件
<button @click="click">按钮</button>
</div>
</template>
<script>
export default {
name: "sonTwo",
created() {
},
methods:{
click(){
this.$emit('change','子组件传到父组件的值')
}
}
}
</script>
<style scoped>
</style>
Vue3父子组件传参
Vue3父传子
在父组件中的子标签中定义一个 ：属性名=属性值，在子组件中用defineProps接收
父组件：
<template>
<div>
父组件
<sonOne :msg="msg"></sonOne>
</div>
</template>
<script setup lang="ts">
import sonOne from '../components/sonOne.vue'
import {ref} from 'vue'
let msg = ref('父组件传给子组件的值')
</script>
<style scoped>
</style>
子组件：
<template>
<div>
子组件
{{ msg }}
</div>
</template>
<script setup lang="ts">
defineProps<{
msg:[]
}>()
</script>
<style scoped>
</style>
Vue3子传父
在父组件的子标签中写自定义事件，在子组件中写一个点击事件，再定义emit，emit的第一个参数是父组件的方法，第二参数就是需要传递的值
父组件：
<template>
<div>
父组件
<sonTwo @change="change">按钮</sonTwo>
{{msg}}
</div>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import sonTwo from "../components/sonTwo.vue";
let msg = ref('')
const change = (data) => {
console.log(data);
msg.value = data
};
</script>
<style scoped>
</style>
子组件：
<template>
<div>
子组件
<button @click="send">按钮</button>
</div>
</template>
<script setup lang="ts">
const emit = defineEmits(['change'])
const send=()=>{
emit('change','子组件传给父组件的值')
}
</script>
<style scoped>
</style>
|