持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情

代码说明

组件结构为

APP：app组件
- FirstLevelSubNode1：一级组件
- FirstLevelSubNode2
- FirstLevelSubNode3
  - SecondarySubNode：二级组件

根容器中包含3个一级组件，对二级组件的传值分别使用了标准属性传值，$props传值，$attrs传值

<template>
  <div id="app">
    <div class="container">
      <div>
        父容器
      </div>
      <div class="subNodes">
        <first-level-sub-node1 :firMsg="'FirstLevelSubNode1'" :secMsg1="'属性传值1'"
                               :secMsg2="'属性传值2'"></first-level-sub-node1>
        <first-level-sub-node2 :firMsg="'FirstLevelSubNode2'" :secMsg1="'props传值1'"
                               :secMsg2="'props传值2'"></first-level-sub-node2>
        <first-level-sub-node3 :firMsg="'FirstLevelSubNode3'" :secMsg1="'attr传值1'"
                               :secMsg2="'attr传值2'"></first-level-sub-node3>
      </div>
    </div>
  </div>
</template>

<script>
import FirstLevelSubNode1 from "./components/FirstLevelSubNode1";
import FirstLevelSubNode2 from "./components/FirstLevelSubNode2";
import FirstLevelSubNode3 from "./components/FirstLevelSubNode3";

export default {
  components: {FirstLevelSubNode1, FirstLevelSubNode2, FirstLevelSubNode3},
  data() {
    return {};
  },
  mounted() {
  }
};

</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.container {
  border: 1px black solid;
  background: gainsboro;
  display: flex;
  flex-direction: column;
  width: 50%;
}
.subNodes{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
</style>

标准属性传值

二级组件中有多少属性，就在一级组件中定义出相应的属性。

<template>
  <div class="FirstLevelSubNode1">
     {{ firMsg }}<br/>
    单个属性传值<br/>
    <secondary-sub-node :sec-msg1="secMsg1" :sec-msg2="secMsg2"></secondary-sub-node>
  </div>
</template>

<script>
import SecondarySubNode from "./SecondarySubNode";

export default {
  name: 'FirstLevelSubNode1',
  components:{SecondarySubNode},
  props: ['firMsg','secMsg1','secMsg2']
}
</script>
<style>
.FirstLevelSubNode1{
  border: 1px cornflowerblue solid;

}
</style>

$props传值

简化了二级组件传值，使用$props代替原有的N个属性，传递到二级组件的属性是一级组件中声明传递属性

<template>
  <div class="FirstLevelSubNode2">
     {{ firMsg }}<br/>
    $prop传值<br/>
    <secondary-sub-node v-bind="$props" ></secondary-sub-node>
  </div>
</template>

<script>
import SecondarySubNode from "./SecondarySubNode";

export default {
  name: 'FirstLevelSubNode2',
  components:{SecondarySubNode},
  props: ['firMsg','secMsg1','secMsg2']
}
</script>
<style>
.FirstLevelSubNode2{
  border: 1px cornflowerblue solid;
  height: 80px;
  width: 180px;
}
</style>

$attrs 传值

$attrs为一级组件申明属性之外的参数，当二级组件中参数过多时使用。

<template>
  <div class="FirstLevelSubNode3">
     {{ firMsg }}<br/>
    $attrs传值<br/>
    <secondary-sub-node v-bind="$attrs" ></secondary-sub-node>
  </div>
</template>

<script>
import SecondarySubNode from "./SecondarySubNode";

export default {
  name: 'FirstLevelSubNode3',
  components:{SecondarySubNode},
  props: ['firMsg']
}
</script>
<style>
.FirstLevelSubNode3{
  border: 1px cornflowerblue solid;
  height: 80px;
  width: 180px;
}
</style>

二级组件

仅用于展示传入参数

<template>
  <div class="hello">
    二级子容器
    msg:{{ secMsg1 }}-{{secMsg2}}
  </div>
</template>

<script>
export default {
  name: 'SecondarySubNode',
  props: ['secMsg1','secMsg2']
}
</script>
<style>
.hello{
  border: 1px cornflowerblue solid;
  height: 80px;
  width: 180px;
}
</style>

注意事项

vue为单向数据传输，当属性传递至子容器后，子容器无法直接修改传入属性，修改需使用下面两种模式

父容器通过v-on:事件名称=方法()，将事件标识传递至子容器，子容器使用$emit 抛出事件，由父容器处理事件，更改传入至子容器的属性完成修改。
子容器使用$parent访问父容器调用父容器修改属性方法完成修改。

Vue 父子组件传值的三种方式