Vue - props属性

Maggieq8324

已于 2023-03-21 16:27:13 修改

阅读量1.2k

点赞数 4

分类专栏： Vue 文章标签： Vue props

于 2021-09-13 13:34:48 首次发布

以下为本篇文章的主要内容，希望大家多提意见，如果喜欢记得点个推荐哦作者：梦想是咸鱼本文版权归作者和CSDN博客共有，欢迎转载，转载时保留原作者和文章地址即可。

本文链接：https://blog.csdn.net/weixin_41182727/article/details/120264767

版权

Vue 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

前言

props用于接收来自父组件的数据

具体应用

基本使用

App.vue

<template>
  <Test :url="url"/>
</template>

<script>
import Test from './components/test.vue'

export default {
  name: 'App',
  components: {
    Test
  },
  data: function () {
    return {
      url: './assets/home/theme6.jpg'
    }
  }
}
</script>

test.vue

export default {
  name: 'test',
  props: ['url'],
  mounted () {
    console.log('url:' + this.url)
  }
}

在这里插入图片描述

确定类型

props属性传值时需要注意使用v-bind指令确定类型
App.vue

<Test :url="url"
        :num="1"
        :flag="true"
        flag1 />

test.vue

export default {
  name: 'test',
  // props: ['url'],
  props: {
    url: {
      type: String,
      default: ''
    },
    num: {
      type: Number
    },
    flag: {
      type: Boolean
    },
    flag1: {
      type: Boolean
    }
  },
  mounted () {
    console.log('url: ' + this.url)
    console.log('num: ' + this.num)
    console.log('flag: ' + this.flag)
    console.log('flag1: ' + this.flag1) // 默认为true
  }
}
</script>

在这里插入图片描述