Vue之props指定default值的使用方法

最新推荐文章于 2024-06-05 14:59:32 发布
最新推荐文章于 2024-06-05 14:59:32 发布
阅读量2w 收藏 7
点赞数 3
分类专栏： vue.js 文章标签： html vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maybe_frank/article/details/116760835
版权

在父组件向子组件传递数据时，把props中的默认值传给子组件，如下代码，自定义组件不写属性就是显示的title中default值“长城”。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test21</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>

</head>
<body>
<div id="app1">
      <cpn1></cpn1>
</div>

<template id="tmp1">
    <div>
        <p>电影名称为：{{title}}</p>

    </div>
</template>

<script>
    // props中对象带有默认值的传递方法，在调用自定义组件中不写属性就是默认
  const cpn1={
      template: "#tmp1",
      props: {
          title: {
              type: String,
              default: "长城"
          }
      }
  }

  new Vue({
    el:"#app1",
    data:{
        title:"cs",
        name:"tom",
        age:22
    },
    components:{
        cpn1
    }
  })
</script>

</body>
</html>

props数据验证中还有个required,表示必填,如果上面的title写成这样：

title:{
    type:String,
    default:"长城",
    required:true
}

运行报错：

这里在网上查了下，如果要这样写显示默认，在实例中加入title:undefined,在自定义标签使用中用v-bind属性绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test21</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>

</head>
<body>
<div id="app1">
      <cpn1 :title="title"></cpn1>
</div>

<template id="tmp1">
    <div>
        <p>电影名称为：{{title}}</p>

    </div>
</template>

<script>
    // props中对象带有默认值的传递方法，在调用自定义组件中不写属性就是默认
  const cpn1={
      template: "#tmp1",
      props: {
          title: {
              type: String,
              default: "长城",
              required:true
          }
      }
  }

  new Vue({
    el:"#app1",
    data:{
        title:undefined

    },
    components:{
        cpn1
    }
  })
</script>

</body>
</html>

 

刚学VUE，很多东西的原理理解的还不是很透彻，暂且记录下学习路上的疑问点及解决方法，与君共勉！

风楚颜
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue中props的默认值defalut使用this时的问题
weixin_45242865的博客
11-09 3862
Vue 中 props 的默认值 default 使用 this 时的问题
【Vue3】解决 Props 没有默认值而报错的问题
m0_56699208的博客
04-07 618
在这个例子中，activeIndex 属性被赋予了一个默认值 0。这意味着如果没有为组件提供 activeIndex 属性，它将自动取值为 0。出现报错：activeIndex 可能未赋值。
Vue中props设置默认值
最新发布
weixin_49352307的博客
06-05 671
vue中prop会接收不同的数据类型**，这里列出了 常用的数据类型的设置默认值的写法,其中包含：Number, String, Boolean, Array, Function, Object。，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。但是，如果初始化的时候就使用里面的值，可能会出现没有该值的情况，此时就会报错。这在开发一个会被别人用到的组件时尤其有帮助。应该使用以下有默认值的写法。
Props中的default
YoungtiNine的博客
11-16 7346
1. 默认使用 props: { obj: { type:Object, default:() => ({}) }, arr: { type:Array, default:() => ([]) } } 2. 为什么需要通过函数的形式 因为对象和数组都是属于我们的复杂类型，在进行访问指向的时候我们使用的是对象和数组的地址，而不像基础数据类型那。 如果我们没有通过函数的形式去设置对象和数据类型的默认值，而是直接采用{}和[],如果多个使用该组件的地方因
【Vue】props默认值类型有哪些
慕白Lee的博客
07-06 4522
在Vue中，props的默认值类型可以是字符串、数字、布尔、对象、数组或函数。在 Vue.js 中，组件之间的数据传递主要依赖于 `props`。`props` 是父组件用来传递数据给子组件的自定义属性。
Vue子组件内的props对象参数配置
Mr.小灰狼_随笔
08-21 3989
Vue子组件内的props对象参数配置 目录 一、简单数据类型 1、布尔类型 Boolean 2、数字类型 Number 3、字符串类型 String 二、复杂数据类型 1、数组 Array 2、对象 Object 3、函数 Function 这篇文章主要介绍了 Vue 子组件内的props 对象里的 default 参数是如何定义 Array 、Object 、或 Function 默认值的正确写法说明，具有很好的参考价值
Props中default用法及踩坑记录
michiko98的博客
04-12 1556
简单的说就是在 props-default里面无法引用到 data的数据，所以修改的时候要把data数据复制到default处。同时也要注意用一个工厂函数去返回数组或者对象。用data中的变量，为props赋默认值，尝试多种方法都失败。父组件未向子组件传参数arrList的情况下，一直获取不到default的值。（注意事项已在注释中说明）
Vue将props值实时传递 并可修改的操作
10-14
当需要子组件修改传递过来的props值时，通常推荐使用`this.$emit()`来通知父组件进行变更。但这种方法需要编写更多的代码，有时可能显得较为繁琐。 有一种技巧可以实现在子组件中更方便地修改props值，并且能实时...
vue中子组件的methods中获取到props中的值方法
10-18
总结一下，Vue子组件通过`props`接收父组件传递的数据，在`methods`中可以直接使用`this.propName`访问。如果`prop`的值是异步获取的，可以通过在子组件中创建一个`watch`来监听变化，并在变化发生时执行相应逻辑。...
解决vue props 拿不到值的问题
10-18
当`props`的值发生变化时，可以触发指定的方法。例如，我们可以在子组件中创建一个`watcher`来监听`datas`的变化，并在值更新后执行`chartsInit`方法。 ```javascript // 子组件 export default { props: { datas...
Vue中用props给data赋初始值遇到的问题解决
10-17
总结来说，当需要在Vue组件中通过props初始化data时，如果props值是动态的，最好使用`computed`属性或者`watch`来确保数据的同步。这是因为props传递给子组件的基本类型值不会自动响应父组件的变化。理解这一点对于...
浅谈vue-props的default写不写有什么区别
10-14
主要介绍了浅谈vue-props的default写不写有什么区别，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue props设置默认值的基本方式
我总是词不达意的博客
07-07 4716
props设置默认值 props设置对象默认值 props设置数组默认值
Vue-props配置
见证自己学习,成长的记录
06-16 4090
不能随便给props里面定义无用的属性，如图，我定义了一个address属性，但是传入参数没有传，就会报错会提示存在的属性是undefined组件实例对象中这个不存在的属性也是undefined功能：让组件接收外部传过来的数据(1)传递数据(2)接收数据第一种方式(只接收):第二种方式(限制类型):props:{第三种方式(限制类型,限制必要性,指定默认值):props:{name:{type:String //类型required:true //必要性。
Vue组件的props
世界和我们都不该止步于此
04-28 3701
props是Vue实例上的一个属性 是组件的自定义属性，我们在封装通用组件的时候合理使用props可以很大限度的提高组件的一个复用性 目录 了解与使用props props的default属性 props的type属性 prop的required必填项 我们想要使用data来进行交互-->（点击按钮加1）： <template> <div id="app"> <p>{{ num }}</p> <butto...
vue3 props设置default
weixin_45825057的博客
09-13 436
/ 除了验证是否符合type的类型，此处再判断该值结果是否符合验证。
2022/8/30 了解props内default默认，type类型，required必填证实是否绑定了init ，组件的三个阶段，组件之间的共享（父子，字父）
weixin_54534229的博客
08-30 1496
了解props内default默认，type类型，required必填证实是否绑定了init ，组件的三个阶段，组件之间的共享（父子，字父）
vue 里 props 类型为 Object 时设置 default: () =＞ {} 返回的是 undefined 而不是 {}？
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
01-17 1299
这样写会被解析器认为是一个代码块，而不是一个对象字面量。今天遇到个小坑，就是 vue 里使用 props 传参类型为 Object 的时候设置。发现 infoData 是 undefined。之前我的写法如下，这种是可以的。
vue组件传值prop类型
你如今的气质里，藏着你走过的路，经历过的事，读过的书，和爱过的人。
05-05 6000
Prop 验证 我们可以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。 为了定制 prop 的验证方式，你可以为props中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如： Vue.component('my-component', { props: {...
vue中props值怎么在方法中使用
05-01
在Vue.js中，props是用于从父组件向子组件传递数据的方式。在子组件中，我们可以通过props选项接收从父组件传递过来的数据。 接收到的props值可以在子组件的方法中使用。我们可以使用this.props来访问props，以便在方法中使用它们。例如： ```javascript <template> <div> <h1>{{ title }}</h1> <button @click="handleClick">{{ buttonText }}</button> </div> </template> <script> export default { name: 'MyComponent', props: { title: String, buttonText: String }, methods: { handleClick() { console.log(`You clicked the "${this.buttonText}" button.`); } } }; </script> ``` 在上面的示例代码中，我们在props选项中定义了两个属性：title和buttonText。在方法中，我们通过this.props访问了这两个属性，并将buttonText属性的值输出到控制台。 需要注意的是，props是只读的，因此我们不应该尝试在子组件中修改它们的值。如果需要在子组件中修改数据，应该使用组件内的数据(data)。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值