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=valueconsole.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,根据情况使用