当前位置：网站首页>85-props的第二个写法

85-props的第二个写法

2022-07-19 05:05:00 【longfei815】

85-props的第二个写法

props是父子传值的中介，props不仅可以写成数组形式，还可以写成对象形式。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>85-props的第二个写法</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id='app'>
    <my-header :title="tit1"></my-header>
    <!-- 显示传的值：456 -->
    <my-header></my-header>
    <!-- 显示默认值：100 -->
  </div>  

  <template id="tmpl">
    <div>
      <h1>{
   {title}}</h1>
    </div>
  </template>


  <script>

    let myHeader = {
      template:"#tmpl",
      props:{
        title:{
          // 没有传递title的时候,默认值是default对应的这个值
          default:100,
          // 期望接收到的数据类型为
          type:Number
        }
      }
    }
    new Vue({
      el:'#app',
      data:{
        tit1:456,
      
      },
      components: {
        myHeader
      }
    })
  </script>
</body>
</html>

原网站

版权声明
本文为[longfei815]所创，转载请带上原文链接，感谢
https://blog.csdn.net/jolinoy/article/details/125694305

边栏推荐

猜你喜欢

随机推荐