单向数据流
数据从父级组件传递给子组件，只能单向绑定。
子组件内部不能直接修改从父级传递过来的数据。
<section id="app">
<custom-component :count="count"></custom-component>
</section>
Vue.component("custom-component", {
props: ['count'],
template: `
<div>
<h1>一个自定义模版</h1>
<input type="button" @click="changeCount" value="按钮"/>
{{count}}
</div>`,
methods: {
changeCount() {
this.count++
}
}
});
new Vue({
el: "#app",
data() {
return {
count: 0
};
}
});
控制台报错
控制台会出现报错：
避免在子组件数据被重写，可以改变
props的情况，使用数据或计算属性来解决。
因此，以上代码可以“折中”解决：
使用data
Vue.component("custom-component", {
//作为data中局部数据的初始值来过渡，必须以函数形式申明，
//相当于子组件里操作的都是this.count的指针
data() {
return {
initCount: this.count
}
},
props: ['count'],
template: `
<div>
<h1>一个自定义模版</h1>
<input type="button" @click="changeCount" value="按钮"/>
<!--该处应该是使用initCount而不是count-->
{{initCount}}
</div>`,
methods: {
changeCount() {
//这里计算的也是initCount
this.initCount++
}
}
});
使用computed
Vue.component("custom-component", {
data() {
return {
initCount: this.count
}
},
//与直接使用data不同的是这里添加选项参数计算属性`computed`
computed: {
initCount2() {
return this.initCount;
}
},
props: ['count'],
template: `
<div>
<h1>一个自定义模版</h1>
<input type="button" @click="changeCount" value="按钮"/>
<!--这里现在使用的是computed里的函数返回结果-->
{{initCount2}}
</div>`,
methods: {
changeCount() {
this.initCount++
}
}
});
子组件向外传值
挂载自定义事件
现在增加一个场景，在父组件也使用了count，当点击按钮的同时，父组件的count值同时也发生变化。
<section id="app">
<h3>父组件使用了count</h3>
<p>{{count}}</p>
<!--需要在自定义模版标签上添加一个自定义事件来接收count值-->
<custom-component :count="count" @increment-click="countHandle"></custom-component>
</section>
添加“通知”处理
此时，需要在子组件的点击触发事件changeCount()里做一个“通知”处理
changeCount() {
this.initCount++;
//触发一下"increment-click"事件， 通知父组件
this.$emit("increment-click");
}
自定义事件
同时，也要在实例的作用域下增加自定义事件countHandle()
methods: {
countHandle() {
//此处的this.count 属于父组件的count
this.count++;
}
}
props验证
语法
- Key值为所需要验证的数据
-
验证类型为原生构造器：
String，Number，Function，Object，Boolean，Array
props:{
propA:Number //单个指定类型
propB:[String,Number],//多个指定类型
propC:{
//必传，且指定类型为字符串
type:String,
required:true
},
propD:{
//数值类型，默认值为1000
type:Number,
default:function(){
return 1000;
}
}
propE:{
//自定义验证规则
validator:function(value){
return value>10
}
}
}
多提一句，在 propD里，添加了个默认值default，在自定义标签上就可以不用绑定count。
<!--未使用default-->
<custom-component :count="count" @increment-click="countHandle"></custom-component>
<!--使用default-->
<custom-component @increment-click="countHandle"></custom-component>
报错
组件可以为props指定验证要求，如果未通过指定验证要求，Vue控制台会发出警告。
报错信息
`
