vue 组件之间传值常用的方法

迈不过友情╰ 2023-06-17 12:54 3阅读 0赞

###### 首先引入三个组件 HelloWorld,Father,Son， ######

###### 三个组件的关系为 HelloWorld>Father>son ######

###### 下面组件通信的介绍中全部采用这三个组件来实现 ######

##### HelloWorld #####

<template>
      <div class="hello">
        <father></father>
      </div>
    </template>
    
    <script> import father from "./Father"; export default { name: "HelloWorld", data() { return { mes: "我是根组件" }; }, components: { father } }; </script>

##### Father #####

<template>
      <div>
        <son></son>
      </div>
    </template>
    <script> import son from "./Son"; export default { data() { return { fatherMes: "我是父亲" }; }, components: { son } }; </script>

##### Son #####

<template>
      <div></div>
    </template>
    <script> export default { data() { return { sonMes: "我是儿子" }; } }; </script>

# 1.props 和 $emit 父子组件之间的通信 #

###### props 进行从父组件到子组件间的传值 ######

1.  在father 组件中为 son 组件绑定数据,此时可以将 fahter 组件中 fatherMes 的值传入 Son 组件中  
    `<son :fatherMes="fatherMes"></son>`
2.  在Son 组件中接收 father 组件传入的值  
    `props: ["fatherMes"]`
3.  在 Son组件中使用传入的值  
    使用起来和Son 自身的变量无区别  
    `<div>{ {fatherMes}}</div>`  
    注意：子组件只能用父组件的值但是不能修改

###### $emit 自定义事件通过子组件改变父组件的值以及子组件向父组件传值 ######

###### A. 改变父组件值 ######

1.  在子组件中定义方法函数,方法函数里自定义事件名

methods: { 
     fn() { 
       this.$emit("change-mes");
     } }

1.  子组件中通过触发 fn() 方法来触发事件

1.  父组件内绑定事件

1.  触发事件执行相应方法函数 changeMes

changeMes() { 
         this.fatherMes = "我是改变后的父亲";
       }

###### B. 向父组件传值 ######

原理和改变父组件的值相同，唯一区别是在注册事件时传递参数

1.  注册事件时将子组件的值，传入事件的参数

fn() { 
         this.$emit("change-mes", this.sonMes);
       }