Vue 组件与组件间的交互

White feathe

发布于 2021-12-08 15:22:07

2.1K0

文章被收录于专栏：White feathe 的博客White feathe 的博客

父组件更改子组件的状态；子组件更改父组件的状态

一开始使用的是 JS 的引用类型进行子父组件进行交互，比如：

示例1：

let str = {
    name:"张三"
}
console.log(str);

str.name = "李四";
console.log(str);

示例2：

父组件与子组件互通（使用 JS 引用类型，修改同一块内存地址，子父组件同时变化）

<template>

    <!-- Details是子组件-->
    <Details  :data="List" />

    <div>{{List.name}}</div>


</template>
<script>
    import Details from "./_details";
    export default {
        components: {
            Details
        },
        data() {
            return {
                List:{
                    name:"张三",
                    arrayList:[1,2,3,4,5]
                }
            }
        }
    }
</script>

子组件代码：

<template>
    <div>
        <div>{{data.List.name}}</div>   
        <button @click="modify()">点我进行更改</button>
    </div>
</template>

<script>
    export default {
        props:[data],
        methods:{
            modify(){
                this.data.List.name = "李四";
            }
        }
    }
</script>

此时，父子组件都进行了更改，name显示的值均为 “李四” ，巧妙的使用 JS 引用类型，

为什么要贴出这两个较简单的代码，是想说明他的引用内存地址是同一块地址，

有时候就可以不使用vuex 进行使用，所以换在Vue中组件与组件简单版本可以进行交互！

下面介绍Vue的交互：

大纲介绍：

父组件传值给子组件 props
父组件调用子组件的方法：（通过 ref 进行操作）
子组件调用父组件（emit、on配合使用）

1、父组件传值给子组件（props）

父组件代码编写：(将数组传递)

<template>

    <!-- Details是子组件-->
    <Details  :data="List" />

</template>
<script>
    import Details from "./_details";
    export default {
        components: {
            Details
        },
        data() {
            return {
                List:[1,2,3,4,5]
            }
        }
    }
</script>

子组件代码编写，通过props进行接收：

<template>
    <ol>
        <li v-for="site in data">
          {{ site }}
        </li>
    </ol>
</template>

<script>
    export default {
        props:[data],
    }
</script>

PS：你会不会想如何传递父组件的方法到子组件，其实没有必要，直接使用下面介绍的3即可！

2、父组件调用子组件的方法：（通过 ref 进行操作）

父组件代码：

<!-- 父组件调用子组件 -->
<template>

    <!-- Details是子组件-->
    <Details  ref="profile" />

</template>
<script>
    import Details from "./_details";
    export default {
        components: {
            Details
        },
        mounted() {
            this.$refs.profile.modal2 = true;
        }

    }
</script>

子组件代码：

<template>
    <div>{{modal2}}</div>
</template>

<script>
    export default {
        data() {
            return {
                modal2: false
            }
        },
    }
</script>

3、子组件调用父组件（

emit、

on配合使用）

描述：可以子组件更改父组件信息

子组件代码编写：

<template>
    <button @click="ok"></button>
</template>

<script>
    export default {
        methods: {
            ok() {
                this.$emit('select-type',1);//向父组件派发事件，同时传递参数1,后面的参数的个数不限
            },
        },
        mounted() {}
    }
</script>

父组件代码编写：

<template>

    <!-- Details是子组件-->
    <Details  @select-type="show" />

</template>
<script>
    import Details from "./_details";
    export default {
        components: {
            Details
        },
        methods: {
            show(){
                alert("从子组件而来！")   
            }

        }

    }
</script>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017/12/09 ，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

vue.js

登录后参与评论

0 条评论

热度