Vue 组件与组件间的交互

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

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

示例1：

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

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

示例2：

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

<template>

    
    <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  :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  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  @select-type="show" />

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

        }

    }
script>

---