VUE6.组件通信父组件向子组件传值

Posted 2020-12-09 totoro-cat

1. 前提&知识点

　　1./components/Father.vue 是父组件， Son.vue 是子组件

　　2.父组件像子组件通信

　　　　props

2.组件通信

　　1. 新增一个路由入口 /father（省略）

　　2. components -> Father.vue 添加一组数据

export default {
  name: "Father",
  data() {
    return {
      father_list: ["第一章", "第二章", "第三章", "第四章"]
    };
  }
};

　　3.父组件中调用，注册，引用子组件 

import Son from "./Son.vue";

　　4. 注册组件

components: {
    "son": Son
  }

　　5. 引用组件，绑定一个自定义的key值

<son :father_list="father_list"></son>

　　6. 子组件通过props接收父组件传过来的值

export default {
  data () {
    name: ‘Son‘
    return {
     // list: [‘第一章‘, ‘第二章‘, ‘第三章‘, ‘第四章‘]
    }
  },
  props: [‘father_list‘]
}

　　7. 访问/father 路由

 

 

3. 完整代码

Father.vue

<template>
  <div>
    <h2>This is Father</h2>
    <son :father_list="father_list"></son>
  </div>
</template>
<script>
import Son from "./Son.vue";
export default {
  name: "Father",
  data() {
    return {
      father_list: ["第一章", "第二章", "第三章", "第四章"]
    };
  },
  components: {
    "son": Son
  }
};
</script>

Son.vue

<template>
  <div>
    <ul>
      <li v-for="item in father_list" :key=‘item‘>{{item}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data () {
    name: ‘Son‘
    return {
     // list: [‘第一章‘, ‘第二章‘, ‘第三章‘, ‘第四章‘]
    }
  },
  props: [‘father_list‘]
}
</script>