组件之间的传值

最新推荐文章于 2023-07-29 19:22:56 发布

kkaalexi

最新推荐文章于 2023-07-29 19:22:56 发布

阅读量254

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/kkaalexi/article/details/111554895

版权

本文介绍了Vue.js中组件间的通信方式，包括从父组件向子组件传递数据使用Prop，以及子组件如何通过$emit触发自定义事件来通知父组件。提供了一段关于如何在父组件和子组件代码中实现这一功能的示例。

摘要由CSDN通过智能技术生成

vue组件之间的传值

父组件–>子组件

通过Prop传值

在子组件中定义一个props属性，若需要遍历时，可以通过动态绑定属性值实现

父组件代码：

<template>
    <div>
        <children v-for="item in schoolList " :schoolmessage="item"></children>
    </div>

</template>
<script>
    import children from "./children";
    export default {
        name: "parent",
        data(){
            return{
                schoolList:[
                    {
                        schoolName:'清华大学',
                        schoolAddress:'北京'
                    },
                    {
                        schoolName:'浙江大学',
                        schoolAddress:'杭州'
                    },
                    {
                        schoolName:'香港中文大学',
                        schoolAddress:'香港'
                    },