vue 父页面向子页面通报数据

2024年4月24日 102次阅读 来源: AA一恭弘=叶 恭弘障目

父页面

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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞