3-2.vue的组件component：父组件向子组件传递数据

最新推荐文章于 2024-03-06 17:47:03 发布

堵车了

最新推荐文章于 2024-03-06 17:47:03 发布

阅读量470

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45660035/article/details/111415231

版权

vue 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

3-2.vue的组件component：父组件向子组件传递数据

1.代码展示

<body>
  <div id='app'>
    <cpn :childtitle='title'></cpn>
  </div>

  <template id='cpn'>
    <div>
      {{childtitle}}
    </div>
  </template>

  <script>

    // 一步到位  
    const cpn = {
      template: "#cpn",
      props: {
        childtitle: String,
      }
    }

    const app = new Vue({
      el: '#app',
      data: {
        title: '这是父组件向子组件传递的数据'
      },
      // 局部注册
      components: {
        cpn
      }
    });
  </script>

</body>

2.过程分解

在这里插入图片描述

3.props里面数据其他常定义的方式

props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }

这段代码截取自官网，如果你想定义其类型检查，是否必须，是否有默认值可以参考上面的写法。当然还有数组形式，但是基本不会用，所有只展示对象的写法。

堵车了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3-2.vue的组件component：父组件向子组件传递数据

3-2.vue的组件component：父组件向子组件传递数据1.代码展示<body> <div id='app'> <cpn :childtitle='title'></cpn> </div> <template id='cpn'> <div> {{childtitle}} </div> </template> <script&g
复制链接

扫一扫