1、父组件向子组件通信
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<cpn v-bind:cmovies="movies" :cmessage="message"></cpn>
</div>
<template id="cpn">
<div>
<ul>
<li v-for="item in cmovies">{{item}}</li>
</ul>
<p>{{cmessage}}</p>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
// 子组件
const cpn = {
template: '#cpn',
props: ['cmovies','cmessage'],
data(){
return {}
},
methods:{
}
}
const app = new Vue({
el: '#app',
data: {
message:'你好',
movies: ['111','232','33323']
},
components: {
cpn
// 以上写法为对象的增强写法,等同于
// 'cpn':cpn
}
})
</script>
</body>
</html>
2、props的基本用法
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<cpn v-bind:cmovies="movies" :cmessage="message"></cpn>
<cpn :cmessage="message"></cpn>
</div>
<template id="cpn">
<div>
<ul>
<li v-for="item in cmovies">{{item}}</li>
</ul>
<p>{{cmessage}}</p>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
// 子组件
const cpn = {
template: '#cpn',
// props: ['cmovies','cmessage'],
// props的其他用法
props:{
// 1、类型限制
// cmovies: Array,
// cmessages: String
// 2、赋予初始值,以及必传值
cmessage:{
type: String,
dafault: 'aaaaa',
required: true //必须要传该属性
},
// 类型是对象或者数组时,默认值必须是一个函数
cmovies:{
type:Array,
default(){
return []
}
}
},
data(){
return {}
},
methods:{
}
}
const app = new Vue({
el: '#app',
data: {
message:'你好',
movies: ['111','232','33323']
},
components: {
cpn
// 以上写法为对象的增强写法,等同于
// 'cpn':cpn
}
})
</script>
</body>
</html>
3、props数据验证
4、props驼峰标识
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<cpn :c-Info="info" :child-my-message="message"></cpn>
</div>
<template id="cpn">
<div>
<p>{{cInfo}}</p>
<p>{{childMyMessage}}</p>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const cpn = {
template: '#cpn',
props:{
cInfo:{
type: Object,
default(){
return {}
}
},
childMyMessage:{
type: String,
default: ''
}
}
}
const app = new Vue({
el: '#app',
data: {
info:{
name: 'why',
age: 18,
height: 1.88
},
message:
'aaaaa'
},
methods: {
},
components:{
cpn
}
})
</script>
</body>
</html>
5、子组件向父组件通信
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<cpn @item-click="btnClick"></cpn>
</div>
<template id="cpn">
<div>
<button v-for="item in categories"
@click="btnClick(item)">
{{item.name}}
</button>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
// 1、子组件
const cpn = {
template: '#cpn',
data(){
return {
categories: [
{"id":"1","name":"热门推荐"},
{"id":"2","name":"数码家电"},
{"id":"3","name":"智能家居"},
{"id":"4","name":"电脑办公"}
]
}
},
methods:{
btnClick(item){
// console.log(item);
// 子组件发射事件
this.$emit('item-click',item)
}
}
}
// 2、父组件
const app = new Vue({
el: '#app',
data: {
message:'你好'
},
methods: {
btnClick(item){
console.log("item---->",item);
}
},
components:{
cpn
}
});
</script>
</body>
</html>