【Vue2和Vue3父子组件传值】

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>