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

在父组件向子组件传递数据时，把props中的默认值传给子组件，如下代码，自定义组件不写属性就是显示的title中default值“长城”。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>test21</title><script src=

风楚颜

21622人浏览 · 2021-05-14 11:33:47

风楚颜 · 2021-05-14 11:33:47 发布

在父组件向子组件传递数据时，把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，很多东西的原理理解的还不是很透彻，暂且记录下学习路上的疑问点及解决方法，与君共勉！