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>

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

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

更多详细知识介绍请访问我的个人主页

    原文作者:AA一叶障目
    原文地址: https://segmentfault.com/a/1190000018633713
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞