Vue父页面和子页面的数据传递＜来自转载＞

父页面：index.vue

<template>
  <div class="hello">
    <Children :name="name"></Children>
  </div>
</template>
<script>
import Children from '你的路径/Children';
export default {
  components:{
    Children:Children
  },
  data () {
    return {
      name:'父页面的数据'
    }
  },
</script>

子组件：Children.vue

<template>
  <div>
    <h2>{{name}}</h2>
  </div>
</template>
<script>
export default {
  data(){
    return{
      activeName:1
    }
  },
  props:{
      name:{
          type:String，
          default:'我是默认值，可以不定义'
      }
  }
}
</script>

PS：props 里定义的内容就是父页面传递过来的数据
type 类型可以是String,Number,Array,Object,Boolean
default 默认如果是 Array 或者 Function 必须以 return 的方式定义
例：

options:{
    type:Array,
    default(){
        return [0,1,2,3]
    }
}

转载博主：sf「AA一叶障目」

原文链接：https://segmentfault.com/a/1190000018633713