vue3基础入门三-组件校验传值

最新推荐文章于 2024-07-11 11:12:10 发布

小小婷几

最新推荐文章于 2024-07-11 11:12:10 发布

阅读量142

点赞数

分类专栏： VUE3学习笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_40128375/article/details/122777680

版权

VUE3学习笔记专栏收录该内容

15 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
  <script>

    const HelloWorld = {
      props: {
        title: {
          type: Number,
          required: true,
          validator: function(value) {
            if(value < 10) {
              throw new Error('值应该大于等于10')
            }
            return value 
          },
          default: 0
        },
        contentAbc: Number // 父组件短横线传递,子组件驼峰命名接收
      },
      inheritAttrs: false, // 不接受父组件传来的non-props属性（不渲染非props接收的属性，比如样式等）
      // $attrs: 接收父组件传来的所有non-props属性, 与inheritAttrs相当于对立的
      template: `<div>
        {{title}} {{contentAbc}}
        <p v-bind="$attrs">$attrs：{{$attrs}}</p>
        <p>{{$attrs.name}}</p>
      </div>`
    }
    const app = Vue.createApp({
      components: { HelloWorld }, // 局部组件注册 建议大写字母开头、驼峰命名
      // Non-Props: 在父组件中传值，但子组件中没有在props中接收; 比如这里的name属性
      template: `<div>
        <hello-world :title="19" :content-abc="123" name="hello-world" style="color:red"/>
      </div>`,
      data(){
        return {
          msg: 'hello world',
        }
      },
      methods: {

      },
    })

    app.mount('#root')
  </script>
</body>
</html>

小小婷几

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue3基础入门三-组件校验传值

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt
复制链接

扫一扫

专栏目录