vue父传子，父组件如何给子组件传值？

在Vue 中，父组件可以通过以下两种方式将数据传递给子组件：

props 属性：父组件在定义子组件时，可以通过 props 属性将数据传递给子组件，子组件可以通过 props 属性接收参数。例如：

父组件：

        <template>
        <div>
            <child-component :message="parentMessage" />
        </div>
        </template>
        <script>
        import ChildComponent from './ChildComponent.vue'
        export default {
            components: { ChildComponent },
            data() {
                return {
                    parentMessage: 'Hello from parent component'
                }
            }
        }
        </script>
    - 子组件：
```html
        <template>
        <div>{{message}}</div>
        </template>
        <script>
        export default {
            props: ['message']
        }
        </script>
- $emit 方法：子组件可以通过 $emit 方法触发一个自定义事件，并将参数传递给父组件。父组件可以通过监听这个自定义事件来接收参数。例如：
    - 子组件：
```html
        <template>
        <div @click="handleClick">{{message}}</div>
        </template>
        <script>
        export default {
            methods: {
                handleClick() {
                    this.$emit('custom-event', 'Custom event triggered from child component')
                }
            }
        }
        </script>
    - 父组件：
```html
        <template>
        <div>
            <child-component @custom-event="handleCustomEvent" />
        </div>
        </template>
        <script>
        import ChildComponent from './ChildComponent.vue'
        export default {
            components: { ChildComponent },
            methods: {
                handleCustomEvent(event) {
                    console.log(event) // 输出: 'Custom event triggered from child component'
                }
            }
        }
        </script>

在上述示例中，父组件通过 props 属性向子
鹏仔前端 pjxi.com qinghuashu.com