vue.js使⽤props传递数据
#使⽤props传递数据
html：传递普通的字符串
<h3>#使⽤props传递数据</h3>
<div id="dr01">
<div>组件实例的作⽤域是孤⽴的。这意味着不能并且不应该在⼦组件的模板内直接引⽤⽗组件的数据。可以使⽤ props 把数据传给⼦组件。</div> <br />
<child msg="hello, vue.js!"></child>
</div>
js:
//********************************************************************
//使⽤props传递数据
//注册组件"child"
Vueponent("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
Vueponent("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
Vueponent("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 动态语法
Vueponent("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>
vuejson转对象
<br />
<div>
<div>component组件（默认）：</div>
<child05 :my-message05="name"></child05>
<div>component组件（once）：</div>
<child05 :="name"></child05>
<div>component组件（sync）：</div>
<child05 :my-message05.sync="name"></child05>
</div>
</div>
js:
/
/********************************************************************
//Prop类型绑定
Vueponent("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验证
Vueponent("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: {

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。