Vue4.3学习笔记组件参数校验与非props特性

野性酷女 2022-03-24 15:44 177阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
    	<title>组件参数校验与非props特性</title>
    	<meta charset="utf-8">
    	<script type="text/javascript" src="vue.js"></script>
    <body>
    	<div id="app">
    		
    			
    			
    		<counters :content='"efewefweff"'></counters>
    	</div>
    </body>
    <script>
    	var counter = {
    		props: {
    			content: {
    				// 1类型校验
    				type: String,
    				// 2是否必传
    				required: false,
    				// 3当没有传的时候的默认值，这个参数是需要required为false的时候才不会报错。
    				default: "abcdcef",
    				// 4自定义校验。比如例子中的是判断content传入的数据是否大于5 如果大于返回true 则正常显示 否则返回false 然后报错
    				validator: function(value) {
    					return (value.length > 5)
    				}
    			}
    		},
    		template: "<div>{
       {content}}</div>"
    	}
    
    	var vm = new Vue({
    		el: "#app",
    		components: {
    		  counters: counter
    		}
    	})
    </script>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，177人围观）

还没有评论，来说两句吧...

相关阅读

相关组件参数校验

父组件向子组件传值 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9i

Bertha 。/ 2023年07月11日 05:33/ 0 赞/ 57 阅读

相关学习VUE第十一天课程（VUE之组件（VUE之组件（Props特性深析））

VUE之组件（Props特性深析）本节总结罗列下组件传参props的相关细节点，大纲如下 1、Props命名风格 2、Props动态和静态 3、组件参数P

r囧r小猫/ 2023年06月11日 03:18/ 0 赞/ 19 阅读

相关 Vue之组件（Props特性深析）

前言本节总结罗列下组件传参props的相关细节点，大纲如下 1、Props命名风格 2、Props动态和静态 3、组件参数Props校验

左手的ㄟ右手/ 2023年06月11日 03:18/ 0 赞/ 21 阅读

相关 Vue笔记：表单双绑、组件、props 属性传递参数

> 什么是双向数据绑定 Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算

柔光的暖阳◎/ 2022年12月10日 14:34/ 0 赞/ 225 阅读

相关 React学习之组件与props

说明：本系列所有demo代码的github地址为：[https://github.com/Brucewu998/react.js-learning][https_github

╰+攻爆jí腚メ/ 2022年11月30日 13:00/ 0 赞/ 182 阅读

相关组件参数校验与非props特性

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>组件参数校验与非props特性</tit

￡神魔★判官ぃ/ 2022年05月25日 14:27/ 0 赞/ 173 阅读

相关 Vue_组件参数校验与非Props特性

一.props 子组件接收父组件的参数的时候，props注册接收的参数 props:['count'] 子组件可以对接收的参数校验。例如规定接收的coun

梦里梦外;/ 2022年05月22日 13:30/ 0 赞/ 272 阅读

相关 Vue 组件参数校验与非props特性

组件的参数校验组件的参数校验指的是什么呢？你父组件向子组件传递的内容，子组件有权对这个内容进行一些约束，这个约束我们可以把它叫做参数的校验。 <div id=

àì夳堔傛蜴生んèń/ 2022年04月23日 14:32/ 0 赞/ 224 阅读

相关 Vue4.3学习笔记组件参数校验与非props特性

<!DOCTYPE html> <html> <head> <title>组件参数校验与非props特性</title> <meta

野性酷女/ 2022年03月24日 15:44/ 0 赞/ 178 阅读

相关 Vue学习笔记（十九）——组件props信息的修改

本文主要介绍一下组件对props（即传入参数）的处理。 props是父组件给子组件传递的参数，而子组件需要修改props的场景非常多，但props并不像组件自己的属性那样可以

今天药忘吃喽~/ 2022年02月04日 00:57/ 1 赞/ 2129 阅读