组件之间传值：父传子[以数组为例]

概要

组件之间传值：父传子[以数组为例]
利用props进行传值

代码

父组件：

<template>
  <JNPFForm :msgFather="getSelectNums" />
</template>
<script>
import JNPFForm from './Form'
export default {
  components: { JNPFForm },
  data() {
    return {
      getSelectNums: ["好", "好", "学", "习", "天", "天", "向", "上"]
    }
  }
}
</script>

子组件：
可以在页面进行渲染，也可以在子组件中的函数进行调用。

<template>
  <div v-for="(item, index) in msgFather" :key="index">
    {{ item + "我是子组件" }}
  </div>
</template>
<script>
export default {
  name:JNPFForm,
  props: ['msgFather'],
  data(){
    return{
    }
  },
  created() {
    this.getAll()
  },
  methods:{
    getAll(){
      console.log(this.msgFather,"msgFather");
    }
  }
}
</script>

结束

这样子一个简单的父组件传值给自组件就完成了