背景

script setup,任何在script setup声明的顶层绑定(包括变量、函数声明，以及import引入的内容)都能在模板中直接使用

在script setup中必须使用defineProps和defineEmits来声明props和emits，他们具备完整的类型推断并且在script setup中直接使用

defineProps和defineEmits只能在script setup中才能使用

app.vue为父组件，list为子组件

父组件向子组件传值

语法糖模式

app.vue

<template>
  <div>我是父组件{{msg}}</div>
  <HelloWorld :msg="msg" />
</template>
<script setup>
    import {ref} from 'vue'
    import HelloWorld from './components/HelloWorld.vue'
    let msg = ref('来自父组件')
</script>

list.vue

<template>
  <div>子组件{{msg}}</div>
</template>
<script setup>
defineProps({
  msg: String
})
</script>

组合式API

app.vue

<template>
  <div>我是父组件{{msg}}</div>
  <HelloWorld :msg="msg" />
</template>
<script>
import {ref} from 'vue'
import HelloWorld from './components/HelloWorld.vue'
export default({
  components:{
    HelloWorld
  },
  setup(){
    let msg = ref('来自父组件')
    return {
      msg
    }
  }
})
</script>

list.vue

<template>
  <div>子组件{{msg}}</div>
</template>
<script>
export default({
  props:['msg'],
  setup(props){
    const {msg} = props;
    return{
      msg
    }
  }
})
</script>

子组件向父组件传值

语法糖

app.vue

<template>
  <div>我是父组件{{msg}}</div>
  <HelloWorld :msg="msg" @change="changeHandler"/>
</template>
<script setup>
import {ref} from 'vue'
import HelloWorld from './components/HelloWorld.vue'
let msg = ref('来自父组件')
const changeHandler = (value) => {
  msg.value = '我变啦';
}
</script>

list.vue

<template>
  <div>子组件{{props.msg}}</div>
  <button @click="changeHandler">改变</button>
</template>
<script setup>
const props = defineProps({
  msg:{
    type: String,
    default: '我是默认值'
  }
})
const emits = defineEmits(['change'])
const changeHandler = () => {
  emits('change', '我变啦')
}
</script>

组合式API

app.vue

<template>
  <div>我是父组件{{msg}}</div>
  <HelloWorld :msg="msg" @change="changeHandler"/>
</template>
<script>
import {ref} from 'vue'
import HelloWorld from './components/HelloWorld.vue'
export default({
  components:{
    HelloWorld
  },
  setup(){
    let msg = ref('来自父组件')
    const changeHandler = (value) => {
      msg.value = '我变啦';
    }
    return {
      msg,
      changeHandler
    }
  }
})
</script>

list.vue

<template>
  <div>子组件{{msg}}</div>
  <button @click="changeHandler">改变</button>
</template>
<script>
export default({
  props:['msg'],
  emits:['change'],
  setup(props,content){
    const {msg} = props;
    const changeHandler = () => {
      content.emit('change','我变啦')
    }
    return{
      msg,
      changeHandler
    }
  }
})
</script>

定义自定义事件 v-model

app.vue

<template>
  <div>我是父组件{{msg}}</div>
  <HelloWorld v-model:msg="msg"/>
</template>
<script setup>
import {ref} from 'vue'
import HelloWorld from './components/HelloWorld.vue'
let msg = ref('来自父组件')
</script>

list.vue

<template>
  <div>子组件{{props.msg}}</div>
  <button @click="changeHandler">改变</button>
</template>
<script setup>
const props = defineProps({
  msg:{
    type: String,
    default: '我是默认值'
  }
})
const emits = defineEmits(['update:msg'])
const changeHandler = () => {
  emits('update:msg', '我变啦')
}
</script>