1.父组件向子组件传值
<body>
<!--父组件-->
<div id="app">
<Cpn :cmovies="movies" :cmessage="message"></cpn>
</div>
<!--子组件-->
<template id='cpn'>
<div>
<ul>
<li v-for="item in cmovies">{{item}}</li>
</ul>
<h1>{{cmessage}}</h1>
</div>
</template>
<script>
// 子组件,父传子props
const Cpn = {
template: '#cpn',
// 1.props: ['cmovies', 'cmessage'],
// 2.类型限制
// props: {
// cmovies: Array,
// cmessage: String
//},
props: {
//3.提供一些默认值
cmessage: {
type: String,
default: 'aaaaa'
},
cmovies: {
type: Array,
default() {
return [];
}
}
},
data() {
return {
}
},
methods: {
}
}
// 父组件
const App = new Vue({
el: '#app',
data: {
message: '你好',
movies: ['hhh', 'mmm', 'kkk']
},
components: {
Cpn
}
})
const Obj = {
}
</script>
</body>
2.子组件向父组件传值
<body>
<!--父组件-->
<div id="app">
<cpn @itemclick='cpnClick'></cpn>
</div>
<!--子组件-->
<template id="cpn">
<div>
<button v-for="item in categories" @click="btnClick(item)">{{item.name}}</button>
</div>
</template>
<script>
// 子组件
const cpn = {
template: '#cpn',
data() {
return {
categories: [
{ id: 'aaaa', name: '热门推荐' },
{ id: 'bbbb', name: '手机数码' },
{ id: 'cccc', name: '家用家电' },
{ id: 'dddd', name: '电脑办公' },
]
}
},
methods: {
btnClick(item) {
// 子组件发射一个事件
this.$emit('itemclick', item);
}
},
}
// 父组件
const App = new Vue({
el: '#app',
data: {
message: '你好',
movies: ['hhh', 'mmm', 'kkk']
},
components: {
cpn
},
methods: {
cpnClick(item) {
console.log(item.name);
}
}
})
</script>
</body>