组件的参数校验和非props特性

最新推荐文章于 2022-05-26 23:25:22 发布

原创最新推荐文章于 2022-05-26 23:25:22 发布 · 264 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

11 篇文章

订阅专栏

本文深入讲解Vue.js中父组件向子组件传递数据的方法，包括基本的传值、参数校验及自定义事件触发机制。同时，探讨了如何给组件绑定原生事件，以及如何处理非props特性的场景。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父组件向子组件传值</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <child content="hello world"></child>
</div>
<script>
    Vue.component("child",{
        template:"<div>{{content}}</div>",
        props:['content']
    })

    var vm=new Vue({
        el:"#app"
    })
</script>
</body>
</html>

上面的代码就是父组件向子组件传值，参考上面的代码；

组件的参数校验：

为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：

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

非props特性

父组件传，但是子组件没有接受

产生的结果：1.报错;2.传入的属性值会在DOM结构上面以属性的方式存在。

一个非 prop 特性是指传向一个组件，但是该组件并没有相应 prop 定义的特性。

因为显式定义的 prop 适用于向一个子组件传入信息，然而组件库的作者并不总能预见组件会被用于怎样的场景。这也是为什么组件可以接受任意的特性，而这些特性会被添加到这个组件的根元素上。

给组件绑定原生事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>给组件绑定原生事件</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <child @click="handleClick()"></child>
</div>

<script>
    Vue.component("child",{
        template:"<div @click='handleChildClick()'>child</div>",
        methods:{
            handleChildClick(){
                alert("child click")
                this.$emit("click")
            }
        }
    })
    var vm=new Vue({
        el:"#app",
        methods:{
            handleClick(){
                alert("click")
            }
        }
    })
</script>

</body>
</html>

组件上面世界定义的事件是无法执行的，子组件上面定义的事件属于自定义事件，需要触发才可以执行。

你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时，你可以使用 v-on 的 .native 修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>给组件绑定原生事件</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <child @click.native="handleClick()"></child>
</div>

<script>
    Vue.component("child",{
        template:"<div>child</div>"
        
    })
    var vm=new Vue({
        el:"#app",
        methods:{
            handleClick(){
                alert("click")
            }
        }
    })
</script>

</body>
</html>