码迷,mamicode.com
首页 > 其他好文 > 详细

【VUE】6.组件通信(一)父组件向子组件传值

时间:2020-06-05 15:25:24      阅读:55      评论:0      收藏:0      [点我收藏+]

标签:第三章   component   绑定   for   http   export   通过   png   efault   

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>

  

【VUE】6.组件通信(一)父组件向子组件传值

标签:第三章   component   绑定   for   http   export   通过   png   efault   

原文地址:https://www.cnblogs.com/totoro-cat/p/13049549.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!