defineProps, defineEmits

1. 在Vue3中父子组件传值、方法是通过defineProps, defineEmits实现的。
2. defineProps 和 defineEmits 都是只在 <script setup> 中才能使用的。 它们不需要导入就会随着 <script setup> 被一同处理编译。
3. defineProps 接收与 props 选项相同的值， defineEmits 也接收 emits 选项 相同的值。

父组件向子组件传值：

• 父组件向子组件传值，需要使用defineProps。defineProps 接收与 props 相同的值。

1. 首先，父组件通过自定义属性向子组件传递值： <Subassembly :value="doc"/>
2. 然后子组件从 vue 中引入definePropsimport { defineProps } from 'vue'
3. 再声明接收的值const props = defineProps(['value']) 最后，就可以在子组件中使用父组件传递过来的值了 <h1>{{ props.value }}</h1>

<script setup>
const props = defineProps({
  foo: String
})

const emit = defineEmits(['change', 'delete'])
// setup 代码
</script>

子组件调用父组件方法：

1. 子组件不能直接向父组件传值，子组件需要调用父组件传递过来的方法，然后再父组件中通过方法修改值。
2. 子组件调用父组件方法，需要使用defineEmits。defineEmits 也接收 emits 相同的值。
3. 首先，父组件通过自定义属性向子组件传递方法： <Subassembly @func="sayHello" />
4. 然后子组件从 vue 中引入 defineEmitsimport { defineEmits } from 'vue' 5.再声明接收的方法const emit = defineEmits(['func'])
   • 最后，通过 **emit('父组件传递过来的方法', '向该方法传递的参数')**使用方法 emit('func', 'hello world')

<template>
  <div>
    <!-- 通过子组件自定义属性传递值、方法 -->
    <Subassembly :value="doc" @func="sayHello" />
    <button @click="sayHello(doc)">父组件按钮</button>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import Subassembly from './Subassembly.vue'


// 待传递的值
const doc = ref('hello');

// 待传递的方法
const sayHello = function (data) {
  alert(data);
}
</script>





<template>
  <div>
    <!-- 使用父组件传递过来的值 -->
    <h1>{{ props.value }}</h1>
    <button @click="handelClick">子组件按钮</button>
  </div>
</template>
<script setup>
// 从 vue 中引入defineProps, defineEmits
import { defineProps, defineEmits } from 'vue'

// 接收父组件传递过来的值
const props = defineProps(['value'])
// 接收父组件传递过来的方法
const emit = defineEmits(['func'])

const handelClick = function  () {
    //调用父组件传递过来的方法，传入参数修改父组件的值 
    emit('func', 'hello world')
}







import {defineEmits} from "vue"

export default defineComponent({

    components: {
    },

    setup(props, ctx) {
    // 接收父组件传递过来的方法

        const emit = defineEmits(['message'])
        // 调用父组件传递过来的方法，传入参数修改父组件的值

        ctx.emit('message', code)

    }
})
</script>

props

defineProps 是一个仅 <script setup> 中可用的编译宏命令，并不需要显式地导入。声明的 props 会自动暴露给模板。defineProps 会返回一个对象，其中包含了可以传递给组件的所有 props：

const props = defineProps(['title'])
console.log(props.title)

如果你没有使用 <script setup>，props 必须以 props 选项的方式声明，props 对象会作为 setup() 函数的第一个参数被传入：

export default {
  props: ['title'],
  setup(props) {
    console.log(props.title)
  }
}
// 一个组件可以有任意多的 props，默认情况下，所有 prop 都接受任意类型的值。

如果你没有在使用<script setup>，你可以通过 emits 选项定义组件会抛出的事件。你可以从 setup() 函数的第二个参数，即 setup 上下文对象上访问到 emit 函数：

export default {
  emits: ['enlarge-text'],
  setup(props, ctx) {
    ctx.emit('enlarge-text')
  }
}

使用对象的形式

<template>
  <div>
    <h1>{{ father }}</h1>
    <h2>{{ father1 }}</h2>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'
defineProps({
  father: {
    type: String,
    default: ''
  },
  father1: {
    type: String,
    default: ''
  },
  modelValue: {
    type: Boolean,
    default: true
  }
})

import { defineProps, defineEmits } from 'vue'
// const props = defineProps(['father', 'father1', 'modelValue'])
defineProps({
  father: {
    type: String,
    default: ''
  },
  father1: {
    type: String,
    default: ''
  },
  modelValue: {
    type: Boolean,
    default: true
  }
})
// console.log(props.modelValue)

const emit = defineEmits(['func', 'update:modelValue'])

const handleClick = () => {
  emit('func', 'hello world')
  emit('update:modelValue', false)
  // console.log(props.modelValue)
} 
</script>