14-(理解)为什么组件data必须是函数P58 - 00:05
针对全局组件
1、data属性必须是一个函数，有返回值
2、也有methods属性。
<div id="app">
<cpn1></cpn1>
</div>
<!--2、通过template标签分离模板 -->
<template id="jsCpn1">
<div>
<p>我是通过template标签分离的模板 {{data1}}</p>
<h2>计算结果{{counter}}</h2>
<button @click="increment">+</button>
<button>-</button>
</div>
</template>
<!--使用vue-->
<script src="../js/vue.js"></script>
<script>
// <!--注册全局组件-->
Vue.component("cpn1",{
template:"#jsCpn1",
data(){//函数的形式
return{
data1:"使用data属性，组件中的数据存放必须是一个函数，有返回值",
counter:0
}
},
methods:{
increment(){
return this.counter++
}
}
});
//局部组件分离写法
const app = new Vue({
el:"#app",
data:{
message:"你好啊"
},
components:{"cpn2":{
template:"#jsCpn2"
}
}
})
</script>
15-(掌握)父子组件通信-父传子propsP59 - 00:10
1、父组件网络请求（通过 props向子组件传递数据）
通过事件向父组件发送消息
<div id="app">
<!--vue实例作为根组件，可向子组件传递数据-->
<cpn1 :cmoves="moves" :cmessage="message"></cpn1>
</div>
<!--子组件模板 -->
<template id="childTemp">
<div>
<ul>
<li v-for="item in cmoves">{{item}}</li>
</ul>
<h2>{{cmessage}}</h2>
</div>
</template>
<!--使用vue-->
<script src="../js/vue.js"></script>
<script>
const cpn1= {
template:"#childTemp",
// props:["cmoves","cmessage"],//1、数组形式传递
// props:{//2、对象形式,类型限制
// cmoves:Array,
// cmessage:String,
// },
props:{//3、提供一些默认值和必传值
cmoves:{
type:Array,//类型是数组或者对象时 默认值必须是一个函数
default(){
return []
},
required:true
},
cmessage:{
type:String,
default:"默认值",
required:true
},
},
data(){
return {}
},
methods:{}
};
const app = new Vue({
el:"#app",
data:{
message:"你好啊",
moves:["海贼王","美女与野兽","加勒比海盗","王者归来"]
},
components:{
cpn1
// "cpn1":{
// template:"#childTemp"
// },
}
})
</script>
16-(掌握)父子组件通信-props驼峰标识P60 - 00:42
1、使用组件模板标签的驼峰式写法
2、组件模板中有多个标签的时候 必须有一个父级标签（包含根div）
<div id="app">
<!--驼峰式写法-->
<cpn1 :c-info="info" :my-message-info="message"></cpn1>
</div>
<template id="cpn-id">
<div><!--//根部div-->
<h2>{{cInfo}}</h2>
<h2>{{myMessageInfo}}</h2>
</div>
</template>
<!--使用vue-->
<script src="../js/vue.js"></script>
<script>
const cpn1={
template:"#cpn-id",
props:{
cInfo:{
type:Object,
default(){
return {}
}
},
//使用驼峰式
myMessageInfo:{
type:String,
default:"默认值"
}
}
};
const app = new Vue({
el:"#app",
data:{
message:"你好啊",
info:{
name:"zhangsan",
old:"15岁",
sex:"men"
}
},
components:{
cpn1
}
})
</script>
17-(掌握)父子组件通信-子传父(自定义事件)P61 - 00:11
注意子组件通过自定义事件 传递 $emit（“事件名称”，要传递的参数）
<div id="app">
<!--v-on不仅可以监听dom事件，还可以监听组件间的自定义事件cpn-click=-->
<cpn1 @cpn-click="cpnClick"></cpn1>
</div>
<!--子组件模板-->
<template id="temp-id">
<div>
<button v-for="(item,index) in categories" @click="btnClick(item)">{{item.title}}</button>
</div>
</template>
<!--使用vue-->
<script src="../js/vue.js"></script>
<script>
// <!--子组件向父组件传递数据-->
const cpn1={
template:"#temp-id",
data(){
return {
categories:[
{id:"aa",title:"热门推荐"},
{id:"bb",title:"家庭用品"},
{id:"bb",title:"家庭用品"}
]
}
},
methods:{
btnClick(item){
//组件标签使用的自定义事件 $emit("cpn-click名称",参数)
this.$emit("cpn-click",item);
console.log("btnClick")
}
}
};
//根组件
const app = new Vue({
el:"#app",
data:{
message:"你好啊",
},
components:{
cpn1
},
methods:{
//自定义的事件监听上绑定
cpnClick(item){
console.log("cpnClick",item)
}
}
})
</script>
