组件：参数验证

知识点

props:组件参数验证语法

组件的数据

为组件中接受到的变量进行逻辑验证。

综合例

<div id="myApp"><h1>身世之谜</h1><show-member-info name="koma" :age="25" :detail="{address:'earth', language:'世界语'}"></show-member-info>
</div>
<script>Vue.component('show-member-info', {props: {name: {type: String,required: true,},age: {type: Number,validator: function (value) {return value >= 0 && value <= 130;}                },detail: {type: Object,default: function() {return {address: 'US',language: 'English',};}},},template: '<div>姓名：{{this.name}}<br/>' + '年龄：{{this.age}}岁<br/>'+ '地址：{{this.detail.address}}<br/>'+ '语言：{{this.detail.language}} </div>',});var myApp = new Vue({el: '#myApp', });
</script>

显示：

组件：事件传递

知识点

v-on
$emit

v-on

侦听组件事件，当组件触发事件后进行事件处理。

$emit

触发事件，并将数据提交给事件侦听者。

综合例

<div id="myApp"><h1>人生加法</h1><add-method :a="6" :b="12" v-on:add_event="getAddResult"></add-method><hr/><h3>{{result}}</h3>
</div>
<script>Vue.component('add-method', {props: ['a', 'b'],template: '<div><button v-on:click="add">加吧</button></div>',methods: {add: function(){var value = 0;value = this.a + this.b;this.$emit('add_event', {result:value});}},});var myApp = new Vue({el: '#myApp', data: {result: 0},methods: {getAddResult: function(pval){this.result = pval.result;}},});
</script>

显示：

点击按钮后：

组件：参数验证、组件：事件传递相关推荐

React.js 小书 Lesson24 - PropTypes 和组件参数验证
作者:胡子大哈原文链接: http://huziketang.com/books/react/lesson24 转载请注明出处,保留原文链接和作者信息. 我们来了到了一个非常尴尬的章节,很多初学的朋 ...
Lesson 24 PropTypes 和组件参数验证
Lesson 24 PropTypes 和组件参数验证我们来了到了一个非常尴尬的章节,很多初学的朋友可能对这一章的知识点不屑一顾,觉得用不用对程序功能也没什么影响.但其实这一章节的知识在你构建多人协 ...
PropTypes 和组件参数验证
我们来了到了一个非常尴尬的章节,很多初学的朋友可能对这一章的知识点不屑一顾,觉得用不用对程序功能也没什么影响.但其实这一章节的知识在你构建多人协作.大型的应用程序的时候也是非常重要的,不可忽视. 都说 ...
管窥MVVMLight Command参数绑定和事件传递
原文:管窥MVVMLight Command参数绑定和事件传递前言由于在实际项目中,业务功能的增加导致软件开发规模在逐渐变大,所以我准备找个Silverlight框架来组织当前项目中的文件,以期能 ...
html下拉框传递参数,HTML通过事件传递参数到js详解及实例
目标处理函数为selectAttr(test) 1.直接传递给定参数如:οnclick="selectAttr('1'); οnclick="selectAttr('a'); 2. ...
微信小程序服务器触发事件,微信小程序组件间通讯与事件
##组件间通讯与事件一.前言如果小程序中有可复用的UI且具有一定的功能性,就可以使用自定义组件将其封装起来.(如果仅仅只需要复用UI可使用template)下面介绍父子组件的数据传递方法,以及一个 ...
iframe的src怎么携带参数_三种传递gRPC动态参数方式的使用体验
gRPC是一个远程调用框架,使用Protobuf做为信息的载体来完成客户端和服务端的数据传输.关于怎么定义Protobuf消息.搭建gRPC服务在之前的系列文章中都有提及,今天来说一下在使用gRPC和 ...
vue 点击事件传递多个参数_Vue子组件监听事件中传递参数的方法
在子组件中,我们可以通过以下方式监听事件: v-on:click="$emit('funcName',a)" 如果需要传多个参数,可以通过以下方式: v-on:click=&quo ...
vue 事件调用传参_vue如何在父组件指定点击事件后向子组件传递参数并调用子组件的事件？...
可以给父组件写一个ref属性,父组件可以通过ref拿到子组件中的数据和方法(即例子中子组件的say方法),这样在父组件中就可以触发子组件的事件了.而父组件向子组件传参可以通过prop属性(即例子中的f ...

组件：参数验证、组件：事件传递

组件：参数验证

知识点

组件的数据

综合例

显示：

组件：事件传递

知识点

v-on

$emit

综合例

组件：参数验证、组件：事件传递相关推荐

最新文章

热门文章

组件：参数验证、组件：事件传递

组件：参数验证

知识点

组件的数据

综合例

显示： 组件：事件传递

知识点

v-on

$emit

综合例

组件：参数验证、组件：事件传递相关推荐

最新文章

热门文章

显示：

组件：事件传递