Vue 组件与组件间的交互

比眉伴天荒 2022-06-04 09:14 292阅读 0赞

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

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

示例1：

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

![示例1配置结果图][1]

示例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>

--------------------

[1]: /images/20220604/fd29f65cec5e4fb39710b3e73b612103.png