父子组件，兄弟组件间传值

父子组件，兄弟组件间传值

目标：

vue的父子组件间传值

---

内容：

两种方式

1. 父组件通过子组件绑定ref调用子组件的方法改变子组件的内容，比如子组件页面刷新，数值改 变，样式改变等等操作
2. 通过props 只传数据，改变某个数值，不能执行方法，刷新页面等等。

---

兄弟组件间传值：

父组件通过调用子组件传值
该案例也可以说是兄弟组件间如何传值。大致思路是，先将
父组件代码示例：

子组件2的代码示例：
这里写具体的子组件的具体实现的

还是上图中的子组件1通过 this.$emit传值给父组件，父组件在对应的子组件中通过@绑定this.$emit中命名的名字，绑定父组件的方法

---

子组件向父组件传值：

方式一：

通过 this.$emit传值给父组件示例：子组件中this.$emit(参数1，参数2)； 参数1可以自主命名不限定，参数2为需要传过去的值

父组件中接收 @后面的名字和子组件中 this.$emit中的参数1名字需要保持一致。

方法的参数 code 是子组件中 this.$emit中的参数2

---

方式二：

.通过父组件给子组件传递的 props 实现：子组件给父组件传递数据
因为时间问题暂时不展示该方式，可自行查资料。后续补上~~~

---

父组件向子组件传值：

通过props

父组件

  <div>
   <!-- 我是子组件 -->
      <children :mesg="mesg" :content="content"></children>
</div>

子组件

<template>
    <div>
        <!-- 子组件内容 -->
        <div>{{mesg}}</div>
    </div>
</template>

<script>
export default {
    props: {
        mesg: String,
        content: String
  }
}
</script>

一般情况下。在props 定义了可以在子组件直接使用。
注释：在ts 曾经遇到过在子组件的方法中无法直接取到值的情况，通过 方法
const { mesg} = { …props }; 获取到父组件的内容。

---

记录学习上的点点滴滴
希望共同学习
一个人走的更快，一群人走的更远