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

Posted totoro-cat

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VUE6.组件通信父组件向子组件传值相关的知识,希望对你有一定的参考价值。

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>

  

以上是关于VUE6.组件通信父组件向子组件传值的主要内容,如果未能解决你的问题,请参考以下文章

React教程:父子组件传值(组件通信)

Vue_(组件通讯)父组件向子组件传值

[React] 子组件向父组件通信:回调函数

React 组件通信

ReactNative组件间的通信

26 父组件向子组件(动静态)传值,参数为函数时的用法