vue3 父子组件传值

一，子传父

父组件

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import { ref } from 'vue'//直接赋值页面不会自动渲染，使用ref存储响应式数据
import { defineExpose } from "vue";父传子
let val = ref('');
const childFun= value =>{
  console.log('----',value)
  // 这里直接赋值value，在页面上直接使用val即可！
  val.value=value
  console.log('val',val)
}
</script>
 
<template>
  <header>
    <div class="wrapper">
      <HelloWorld @child="childFun"/>
    </div>
  </header>
<div>我是子组件过来的值：{{val}}</div>
</template>
 

子组件

<script setup>
import {  defineEmits } from 'vue'//子传父值先引用emits方法
 defineProps({
   msg: {
     type: String,
     required: true
  }
 })
//要先声明，不然会报错
const emits = defineEmits(['child'])
function tofu (){
  emits('child','123')
}
</script>
 
<template>
  <div class="greetings">
    <h1 class="green">msg</h1>
    <button @click="tofu">子组件按钮</button>
  </div>
</template>
 

二，父传子

父组件

<script setup>
import HelloWorld from './components/HelloWorld.vue'
 
</script>
 
<template>
  <header>
    <div class="wrapper">
      <HelloWorld msg='我是父组件'/>
    </div>
  </header>
 
</template>
 
 

子组件

<script setup>
 defineProps({
   msg: {
     type: String,
     required: true
  }
 })
 
</script>
 
<template>
  <div class="greetings">
    <h1 class="green">{{msg}}</h1>
  </div>
</template>

vue3和vue2区别还是有一些的，V2传值直接赋值，有时是可以直接数据响应渲染

setup可以直接写在script标签上，也可以写成函数形式

const声明的变量，在后期不能进行修改，不然会报错，需后期修改的变量尽量使用let ,var,根据情况使用