<div id="app">
<h2>自定义组件</h2>
<custom>
<!-- 渲染的数据，是父组件中的数据，如果想使用子组件中的数据，就在子组件中建立自己的数据 -->
{{message}}
</custom>
</div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script>
Vue.component('custom',{
data(){
return {
message:"我是子组件的数据"
}
},
template:`
<div>
<p>我是{{message}}</p>
<slot>
// 这的内容会被父组件中内容替换
<p> {{message}}</p>
</slot>
</div>
`
})
new Vue({
el:"#app",
data:{
message:"我是父组件的数据"
}
})
</script>
页面渲染
编译作用域.png
运用了slot分发，使我们对组件的应用更加灵活。
单向数据流
数据从父组件传递给子组件，只能单项绑定。
在子组件内不应该修改父组件传递过来的数据。
改变prop的情况：
1.作为data中局部数据的初始值使用
2.作为子组件中computed属性
props 验证
我们在父组件给子组件传值得时候，为了避免不必要的错误，可以给prop的值进行类型设定，让父组件给子组件传值得时候，更加准确
props:{
propA:Number, 数值类型
propB:[String,Number], 多种类型
propC:{type:String,required:true}, 必填项
propD:{type:Number,default:100}, 默认是
propE:{typr:Number,default:function(){return 1000}}
propF:{validator:function(value){return value>2}} 符合value>2的值
}
不明白，看如下案例，要求父组件给子组件传值得时候
1、这个参数是必须传的
2、值必须是数值类型的
3、默认参数是10
Vue.component('custom-cmpontent',{
data(){
return {
incrementCount:this.count //作为局部组件的data的初始值
}
},
props:{
count:{
type:Number, // 类型
default:10, // 默认值
required:true //必须要传参数
}
},
computed:{
incrementCount2(){
return this.incrementCount
}
},
template:`
<div>
<h2>我是一个自定义组件</h2>
<input type='button' value="改变count的值" @click="changeCount">
{{incrementCount}}
