vue系列文章（15）属性传值props

最新推荐文章于 2023-02-16 14:24:59 发布

互联网极客

最新推荐文章于 2023-02-16 14:24:59 发布

阅读量365

点赞数

分类专栏： ----前端开发

本文链接：https://blog.csdn.net/jsqfengbao/article/details/94741294

版权

----前端开发专栏收录该内容

32 篇文章 3 订阅

订阅专栏

父组件想往子组件进行传输数据，可以采用props进行传输。如下面的app.vue对users数据进行传输。

如app.vue里面的users如下：

data () {
    return {
        users:[
          {name:"MiaoJie",position:"Web开发",show:false},
          {name:"MiaoJie",position:"Web开发",show:false},
          {name:"MiaoJie",position:"Web开发",show:false},
          {name:"MiaoJie",position:"Web开发",show:false},
          {name:"MiaoJie",position:"Web开发",show:false},
          {name:"MiaoJie",position:"Web开发",show:false},
          {name:"MiaoJie",position:"Web开发",show:false}
      ]
    }
  },

html代码里对users进行传输

<users v-bind:users="users"></users>

采用v-bind绑定自定义users绑定的属性名可以自定义。

export default {
  // props: ["users"],
  //标准写法
  props: {
    users: {
      type: Array,
      required: true
    }
  },
  data(){
    return{
      
    }
  },
  methods:{

  }
}

如上你们是Users里面的js对prpos进行接收，其中有两种方式进行接收，第一种是：

props: ["users"],

第二种是：

props: {

users: {

type: Array,

required: true

}

对数据格式进行接收，并对数据格式进行严格限制。这样的话就子组件就可以接收父组件的数据了。