Vue父子组件通信

前言

Vue是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS、JavaScript构建，并提供了一套声明式的、组件化的编程模式，帮助你高效地开发用户界面。
在一个组件中又定义了其他的组件就是父子组件；在vue中子组件是不能访问父组件的数据的，如果子组件想要访问父组件的数据，必须通过父组件传递。

一、父传子

在父组件中，用v-bind动态绑定一个自定义属性，用于给子组件传递数据。

父组件

<template>
  <div>
    <child :users = "user"></child>
  </div>
</template>
<script>
import { child } from './child';
  export default {
      components: { child },
      data() {
          return {
              user: "张三"  
          }
      }
  };
</script>

在子组件中，使用props接收父组件传过来的数据。

子组件

<template>
	<div>
      {{ users }}
  </div>
</template>
<script>
  export default {
      props: ["users"]
  };
</script>

二、子传父

子组件通过事件的方式，利用$emit给父组件传值。 **注意：$emit的第一个参数是父组件自定义事件的方法名，后边的"value"是子组件给父组件传递的数据**

子组件

<template>
	<div>
      <child @info="getInfo"></child>
  </div>
</template>

<script>
import { child } from "./child";
  export default {
      components: { child },
      methods: {
          getInfo(value) {
              // value 就是子组件传递过来的数据
          }
      }
  }
</script>

完结