Vue 组件与组件间的交互

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

一开始使用的是 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>

---