Vue——组件参数校验与非Props特性

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>组件参数校验与非Props特性</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>

    <body>
        <div id="root">
            <child :content="‘组件参数校验‘"></child>
            <lastchild :text="‘非Props特性‘"></lastchild>
        </div>
        <script type="text/javascript">
            Vue.component(‘child‘, {
                props: {
                    //                    content: Number
                    //                    content: [String,Number]
                    content: {
                        type: String,
                        //                        required: false,
                        //                        default: ‘default Value‘,
                        //                        validator(value) {
                        //                            return(value.length > 5)
                        //                        }
                    }
                },
                template: ‘<div>{{content}}</div>‘
            })
            Vue.component(‘lastchild‘, {
                template: ‘<div>非Props特性</div>‘
            })
            var rm = new Vue({
                el: ‘#root‘
            })
        </script>
    </body>

</html>

原文地址：https://www.cnblogs.com/Harold-Hua/p/11749896.html

时间： 2024-11-05 22:42:33

Vue——组件参数校验与非Props特性的相关文章

组件参数校验与非props特性

父组件传递content="hello world",子组件有权对其进行约束,或者说校验 <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="./vue.j

父组件向子组件传递一些参数,那么子组件有权对这些参数进行一个校验,这个就是组件参数校验需求:父组件传递过来的必须是个字符串,这个要怎么去校验呢 <div id='root'> <child content='hello world'></child> </div> <script> Vue.component('child',{ props:{ content:String }, template:'<div>{{content}}

vue组件中的通信

一.组件间的关系 1.父子关系 2.兄弟关系 3.隔代关系二.组件间的通信方式 1.props 2.$emit/$on 3.VUEX 4.$parent/$children 5.$attrs/$listeners 6.provide/inject 三.通信方式举例新建了一个过程,采用webpack来管理项目. 方法一:props / $emit 1.props---父组件向子组件传值子组件:sub1.vue 父组件:app.vue 父组件通过props向下传递给子组件.注:组件中的数据共

vue组件化开发实战 - 实现简易ElementUI的Form表单组件

Input 组件功能: 进行数据双绑通知FormItem组件校验 <template> <div> <input :type="type" :value="value" @input="onInput" v-bind="$attrs" > </div> </template> <script> export default { inheritAttrs

vue组件间通信六种方式（完整版）

vue组件间通信六种方式(完整版) 前言组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A 和 B.B 和 C.B 和 D 都是父子关系,C 和 D 是兄弟关系,A 和 C 是隔代关系(可能隔多代). 针对不同的使用场景,如何选择行之有效的通信方式?这是我们所要探讨的主题.本文总结了vue组件间通信的几种方式,如props.$emit/$on.vuex.$parent / $chil

vue 组件的书写

简单的来说是 vue组件最核心的就是props和自定义函数,来实现组件的开发最简单的一个组件子组件如下: <template> <div class="bgClass"> <h3> {{name}} </h3> </div> </template> <script> export default { name: "bg-div", props:{ name:{ type:Stri

vue 组件属性props,特性驼峰命名,连接线使用

今天在学习vue的时候碰到了一个有趣的问题是这样的,先来个话题引入,后面会用到 var myname={ 'first-name':'9', 'last-name':'l o n g' } console.log(myname.first-name); console.log(myname['first-name']); 打印出来是 NaN 9 解释下,之所以没有前面没有打印出来9,是因为程序走的时候,把我们认为的英文连接符当做减号看待,myname.first是undefined,nam

Vue组件选项props

前面的话组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息.本文将详细介绍Vue组件选项props 静态props 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,需要通过子组件的 props 选项使用Prop传递数据

vue的父子组件间传值以及非父子间传值

Vue组件间的传值方式: 父传子子传父非父子间传值 1.首先父组件传值给子组件,使用bind绑定属性,然后在子组件用props接收属性值. //父组件 <template> <input type="text" /> <br/> <child :inputValue="inputValue"></child> </template> <script> import child f