Vue.js-----轻量高效的MVVM框架(九、组件利用Props传递数据)

本文主要是介绍Vue.js-----轻量高效的MVVM框架(九、组件利用Props传递数据),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

#使用props传递数据

html:传递普通的字符串

<h3>#使用props传递数据</h3>
<div id="dr01"><div>组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。</div><br /><child msg="hello, vue.js!"></child>
</div>

js:

复制代码
//********************************************************************
//使用props传递数据
//注册组件"child"
Vue.component("child", {//声明props属性props: ['msg'],//props可以用在模板内//可以用"this.msg"设置template: '<div>msg: {{msg}}</div>'
});
var dr01 = new Vue({el: "#dr01",
});
复制代码

 结果展示:

  

#camelCase vs. kebab-case

html:在html中定义或者绑定属性的时候要符合kebab-case规则

复制代码
<h3>#camelCase vs. kebab-case</h3>
<div id="dr02"><div>HTML 特性不区分大小写。名字形式为 camelCase 的 prop 用作特性时,需要转为 kebab-case(短横线隔开)</div><br /> <!-- kebab-case in html --><child02 my-message02="Hello, this is kebab-case message!"></child02>
</div>
复制代码

js:在js中定义的属性名称如果是"camelCase"规则,则在html定义或者绑定value的时候要用"kebab-case"规则(像烤羊肉串一样的烤串命名法)

复制代码
//********************************************************************
//camelCase vs. kebab-case
//注册组件child02
Vue.component("child02", {//在js中用驼峰命名法props: ["myMessage02"],template: "<div>myMessage02: {{myMessage02}}</div>"
});
var dr02 = new Vue({el: "#dr02",
});
复制代码

 结果展示:

  

#动态Props

html:

复制代码
<h3>#动态Props</h3>
<div id="dr03"><div><input v-model="parentMsg" placeholder="please input parentMsg" /></div><br /><!-- 用v-bind绑定数据parentMsg到组件中 --><child03 v-bind:my-message03="parentMsg"></child03><!-- 缩写v-bind--><child03 :my-message03="parentMsg"></child03>
</div>
复制代码

 

js:

复制代码
//********************************************************************
//动态Props
//注册组件myMessage03
Vue.component("child03", {props: ['myMessage03'],template: "<div>myMessage03: {{myMessage03}}</div>"
});
var dr03 = new Vue({el: "#dr03",data: {parentMsg: "Hello, this is parentMsg!",}
});
复制代码

 结果展示:

  

#字面量语法 VS 动态语法

html:如果在为vue组件prop定义或者赋值的时候用了“v-bind:”的动态语法,则会先将其转化为js表达式,然后计算结果赋值,下面示例中,第一个传递的是字符串,第二个传递的是123+456即579的数值

复制代码
<h3>#字面量语法 VS 动态语法</h3>
<div id="dr04"><!-- 这里传递是字符串 --><child04 my-message04="123+456"></child04><!-- 这里用了动态语法,传递的值会通过js的表达式计算,传递的是数字 --><child04 :my-message04="123+456"></child04>
</div>
复制代码

 

js:

复制代码
//********************************************************************
//字面量语法 VS 动态语法
Vue.component("child04", {props: ["myMessage04"],template: "<div>myMessage04: {{myMessage04}}</div>",
});
var dr04 = new Vue({el: "#dr04",
});
复制代码

 结果展示:

  

#Prop类型绑定

prop 默认是单向绑定:当父组件的属性变化时,将传导给子组件,但是反过来不会。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。不过,也可以使用 .sync 或 .once 绑定修饰符显式地强制双向或单次绑定:

注意:双向绑定会把子组件的 msg 属性同步回父组件的 parentMsg 属性。单次绑定在建立之后不会同步之后的变化。

html:

复制代码
<h3>#Prop类型绑定(单向、双向)</h3>
<div id="dr05"><div><div>vue实例:</div><input v-model="name" /></div><br /><div><div>component组件(默认):</div><child05 :my-message05="name"></child05><div>component组件(once):</div><child05 :my-message05.once="name"></child05><div>component组件(sync):</div><child05 :my-message05.sync="name"></child05></div>
</div>
复制代码

 js:

复制代码
//********************************************************************
//Prop类型绑定
Vue.component("child05", {props: ["myMessage05"],template: '<input type="text" v-model="myMessage05" />'
});
var dr05 = new Vue({el: "#dr05",data: {name: "DarkRanger",}
});
复制代码

 结果展示:

  

#Prop验证

html:

复制代码
<h3>#Prop验证</h3>
<div id="dr06"><div><div>name:{{dr.name}}, age:{{dr.age}}.</div><div><input v-model="telphone" /></div></div><div><child06 :msg_null="123+456" msg_string="this is string" :msg_number="99" :msg_twoway.sync="telphone" :msg_validate="mobilephone" :msg_number2String="mobilephone" :msg_obj2json="dr" :msg_json2obj="drJson"></child06></div>
</div>
复制代码

 js:

复制代码
//********************************************************************
//Prop验证
Vue.component("child06", {props: {//基础类型检测("null"意思是任何类型都可以)msg_null: null,//String类型,必须是定义过的,可以是空字符串""
        msg_string: {type: String,required: true,},//Number类型,默认值100
        msg_number: {type: Number,default: 100,},//Object类型,返回值必须是js对象
        msg_obj: {type: Object,default: function() {return {name: "DarkRanger",age: "18",}}},//指定这个prop为双向绑定//如果绑定类型不对将抛出一条警告
        msg_twoway: {type: String,twoWay: true,},//自定义验证,必须是Number类型,验证规则:大于0
        msg_validate: {type: Number,validator: function(val) {return val > 0;}},//将值转为String类型//在设置值之前转换值(1.0.12+)
        msg_number2string: {coerce: function(val) {return val + ""}},//js对象转JSON字符串
        msg_obj2json: {coerce: function(obj) {return JSON.stringify(obj);}},//JSON转js对象
        msg_json2obj: {coerce: function(val) {return JSON.parse(val);}},},template: '<div>msg_null: {{msg_null}}</div>' 
    + '<div>msg_string:{{msg_string}}</div>'
    + '<div>msg_number: {{msg_number}}</div>'
    + '<div>msg_obj:{{"name-->"+msg_obj.name+", age-->"+msg_obj.age}}</div>'
    + '<div>msg_twoway:<input v-model="msg_twoway"></div>'
    + '<div>msg_validate:{{msg_validate}}</div>'
    + '<div>msg_number2String: {{msg_number2string}}</div>'
    + '<div>msg_obj2json: {{msg_obj2json}}</div>'
    +'<div>msg_json2obj:{{"name: "+msg_json2obj.name+"; age: "+msg_json2obj.age}}</div>' }); var dr06 = new Vue({el: "#dr06",data: {telphone: "0356-1234567",mobilephone: 15912345678,dr: {name: "DarkRanger",age: 25},drJson: '{"name":"DarkRanger","age":25}',} })
复制代码

 

展示结果:

  

解释:

1、msg_null:不论什么数据类型,只要能解析成功,就渲染成正确的html

2、msg_string:只能传递String类型的字符串,如果将child06中的“msg_string="this is string"”更改为“:msg_string="1+2"”,

  控制台报错:

3、msg_number:如果在child06标签中没有定义值,我们将会取默认值100,现在定义了“:msg_number="99"”,如果将“:msg_number="99"”更改为“msg_number="99"”,控制台报错:

  

4、msg_obj:在js中我们定义的msg_obj的default属性是一个具有返回js对象的函数,这里取值的时候直接取的就是返回值,如果在child06中定义或者绑定了新的js对象,则会将msg_obj更新为新的数据。取js对象属性值的时候用{{Object.prop}}取值即可。

5、msg_twoway:双向数据绑定,在测试的过程中发现,即使设置“twoWay: true”,当子组件发生变化时,vue实例的数据并不会更新,还是单向的数据绑定,这里我将child06中原先的“:msg_twoway="telphone"”更改为“:msg_twoway.sync="telphone"”,保证测试能够数据双向绑定。

6、msg_validate:有验证规则的组件数据,这里定义的规则是当前数值必须大于0,如果将child06中的“:msg_validate="mobilephone"”更改为“:msg_validate="-1"”。控制台报错:

  

7、msg_number2string:在结果赋值之前将数值转化为字符串。

8、msg_obj2json:vue.js内置了JSON的两个方法,一个是JSON.parse(jsonStr)--》将JSON字符串转化为js对象,另外一个是JSON.stringify(obj)--》将js对象序列化为JSON字符串。

这里是将obj转化为json字符串,需要添加coerce属性,它是一个具有返回json字符串的函数,当然不是必须得用JSON.stringify(obj)方法,只要方法合理,能够转化为json能够识别的字符串即可。

9、msg_json2obj: 将json字符串转化为js对象。

 

最后附上完整的html代码:

复制代码
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><script type="text/javascript" src="js/vue.js"></script><title>组件传递数据Props</title></head><body style="background-color: lightgray;"><h3>#使用props传递数据</h3><div id="dr01"><div>组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。</div><br /><child msg="hello, vue.js!"></child></div><hr /><h3>#camelCase vs. kebab-case</h3><div id="dr02"><div>HTML 特性不区分大小写。名字形式为 camelCase 的 prop 用作特性时,需要转为 kebab-case(短横线隔开)</div><br /><!-- kebab-case in html --><child02 my-message02="Hello, this is kebab-case message!"></child02></div><hr /><h3>#动态Props</h3><div id="dr03"><div><input v-model="parentMsg" placeholder="please input parentMsg" /></div><br /><!-- 用v-bind绑定数据parentMsg到组件中 --><child03 v-bind:my-message03="parentMsg"></child03><!-- 缩写v-bind--><child03 :my-message03="parentMsg"></child03></div><hr /><h3>#字面量语法 VS 动态语法</h3><div id="dr04"><!-- 这里传递是字符串 --><child04 my-message04="123+456"></child04><!-- 这里用了动态语法,传递的值会通过js的表达式计算,传递的是数字 --><child04 :my-message04="123+456"></child04></div><hr /><h3>#Prop类型绑定(单向、双向)</h3><div id="dr05"><div><div>vue实例:</div><input v-model="name" /></div><br /><div><div>component组件(默认):</div><child05 :my-message05="name"></child05><div>component组件(once):</div><child05 :my-message05.once="name"></child05><div>component组件(sync):</div><child05 :my-message05.sync="name"></child05></div></div><h3>#Prop验证</h3><div id="dr06"><div><span>vue实例</span><div>name:{{dr.name}}, age:{{dr.age}}.</div><div><input v-model="telphone" /></div></div><br /><div><span>vue自定义组件</span><child06 :msg_null="123+456" msg_string="this is string" :msg_number="99" :msg_twoway.sync="telphone" :msg_validate="mobilephone" :msg_number2String="mobilephone" :msg_obj2json="dr" :msg_json2obj="drJson"></child06></div></div><script>//********************************************************************//使用props传递数据//注册组件"child"
            Vue.component("child", {//声明props属性
                props: ['msg'],//props可以用在模板内//可以用"this.msg"设置
                template: '<div>msg: {{msg}}</div>'});var dr01 = new Vue({el: "#dr01",});//********************************************************************//camelCase vs. kebab-case//注册组件child02
            Vue.component("child02", {//在js中用驼峰命名法
                props: ["myMessage02"],template: "<div>myMessage02: {{myMessage02}}</div>"});var dr02 = new Vue({el: "#dr02",});//********************************************************************//动态Props//注册组件myMessage03
            Vue.component("child03", {props: ['myMessage03'],template: "<div>myMessage03: {{myMessage03}}</div>"});var dr03 = new Vue({el: "#dr03",data: {parentMsg: "Hello, this is parentMsg!",}});//********************************************************************//字面量语法 VS 动态语法
            Vue.component("child04", {props: ["myMessage04"],template: "<div>myMessage04: {{myMessage04}}</div>",});var dr04 = new Vue({el: "#dr04",});//********************************************************************//Prop类型绑定
            Vue.component("child05", {props: ["myMessage05"],template: '<input type="text" v-model="myMessage05" />'});var dr05 = new Vue({el: "#dr05",data: {name: "DarkRanger",}});//********************************************************************//Prop验证
            Vue.component("child06", {props: {//基础类型检测("null"意思是任何类型都可以)
                    msg_null: null,//String类型,必须是定义过的,可以是空字符串""
                    msg_string: {type: String,required: true,},//Number类型,默认值100
                    msg_number: {type: Number,default: 100,},//Object类型,返回值必须是js对象
                    msg_obj: {type: Object,default: function() {return {name: "DarkRanger",age: "18",}}},//指定这个prop为双向绑定//如果绑定类型不对将抛出一条警告
                    msg_twoway: {type: String,twoWay: true,},//自定义验证,必须是Number类型,验证规则:大于0
                    msg_validate: {type: Number,validator: function(val) {return val > 0;}},//将值转为String类型//在设置值之前转换值(1.0.12+)
                    msg_number2string: {coerce: function(val) {return val + ""}},//js对象转JSON字符串
                    msg_obj2json: {coerce: function(obj) {return JSON.stringify(obj);}},//JSON转js对象
                    msg_json2obj: {coerce: function(val) {return JSON.parse(val);}},},template: '<div>msg_null: {{msg_null}}</div>' + '<div>msg_string:{{msg_string}}</div>' + '<div>msg_number: {{msg_number}}</div>' + '<div>msg_obj:{{"name-->"+msg_obj.name+", age-->"+msg_obj.age}}</div>' + '<div>msg_twoway:<input v-model="msg_twoway"></div>' + '<div>msg_validate:{{msg_validate}}</div>' + '<div>msg_number2String: {{msg_number2string}}</div>' + '<div>msg_obj2json: {{msg_obj2json}}</div>' + '<div>msg_json2obj:{{"name: "+msg_json2obj.name+"; age: "+msg_json2obj.age}}</div>'});var dr06 = new Vue({el: "#dr06",data: {telphone: "0356-1234567",mobilephone: 15912345678,dr: {name: "DarkRanger",age: 25},drJson: '{"name":"DarkRanger","age":25}',}})</script></body></html>
复制代码

这篇关于Vue.js-----轻量高效的MVVM框架(九、组件利用Props传递数据)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/930910

相关文章

C#使用SQLite进行大数据量高效处理的代码示例

《C#使用SQLite进行大数据量高效处理的代码示例》在软件开发中,高效处理大数据量是一个常见且具有挑战性的任务,SQLite因其零配置、嵌入式、跨平台的特性,成为许多开发者的首选数据库,本文将深入探... 目录前言准备工作数据实体核心技术批量插入:从乌龟到猎豹的蜕变分页查询:加载百万数据异步处理:拒绝界面

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战:从入门到进阶优化1. MyBatis

Python Dash框架在数据可视化仪表板中的应用与实践记录

《PythonDash框架在数据可视化仪表板中的应用与实践记录》Python的PlotlyDash库提供了一种简便且强大的方式来构建和展示互动式数据仪表板,本篇文章将深入探讨如何使用Dash设计一... 目录python Dash框架在数据可视化仪表板中的应用与实践1. 什么是Plotly Dash?1.1

基于Flask框架添加多个AI模型的API并进行交互

《基于Flask框架添加多个AI模型的API并进行交互》:本文主要介绍如何基于Flask框架开发AI模型API管理系统,允许用户添加、删除不同AI模型的API密钥,感兴趣的可以了解下... 目录1. 概述2. 后端代码说明2.1 依赖库导入2.2 应用初始化2.3 API 存储字典2.4 路由函数2.5 应

Python GUI框架中的PyQt详解

《PythonGUI框架中的PyQt详解》PyQt是Python语言中最强大且广泛应用的GUI框架之一,基于Qt库的Python绑定实现,本文将深入解析PyQt的核心模块,并通过代码示例展示其应用场... 目录一、PyQt核心模块概览二、核心模块详解与示例1. QtCore - 核心基础模块2. QtWid

SpringBoot使用OkHttp完成高效网络请求详解

《SpringBoot使用OkHttp完成高效网络请求详解》OkHttp是一个高效的HTTP客户端,支持同步和异步请求,且具备自动处理cookie、缓存和连接池等高级功能,下面我们来看看SpringB... 目录一、OkHttp 简介二、在 Spring Boot 中集成 OkHttp三、封装 OkHttp

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

使用Python高效获取网络数据的操作指南

《使用Python高效获取网络数据的操作指南》网络爬虫是一种自动化程序,用于访问和提取网站上的数据,Python是进行网络爬虫开发的理想语言,拥有丰富的库和工具,使得编写和维护爬虫变得简单高效,本文将... 目录网络爬虫的基本概念常用库介绍安装库Requests和BeautifulSoup爬虫开发发送请求解