【Vue】父子组件之间的通信

情景

父组件有一个 btnList 数组，里面存放着按钮的名称和按钮的id，现在要把这个数组传入到子组件中进行渲染。

子组件渲染出按钮后，点击按钮，父组件的 h1 标签中会显示出当前点击的按钮是哪一个。

实现

父组件传值给子组件可以使用 props 的方式，但是这种方式只能单向数据传递，即 只能父组件传，子组件接收。

子组件传值给父组件使用 自定义事件 $emit() 。

HTML版

代码

<div id="app">
   <father></father>
</div>
<!-- 模板抽离写法 -->
<!-- 父组件模板 -->
<template id="father">
    <div>
        <h1>{
  {whichOne}}</h1>
        <son :list="btnList" @btn-click="sonBtnClick"></son>
    </div>
</template>
<!-- 子组件模板 -->
<template id="son">
    <div>
        <button v-for="btn in list" :key="btn.id" @click="btnClick(btn)">
            {
  {btn.name}}
        </button>
    </div>
</template>
<script src="../vue.js