From father to son: use props
<body>
<div id='app'>
<!-- <ul>
<li v-for="item in movies">{
{
item}}</li>
<li>{
{
title}}</li>
</ul> -->
<!-- 引入子组件 -->
<!-- 用v-bind把父传过来的值关联起来 -->
<cpn :cmovies='movies' :ctitle='title'></cpn>
</div>
<!-- 子组件 -->
<!-- 不能忘了id -->
<template id="cpn">
<div>
<h1>{
{
ctitle}}</h1>
<ul>
<li v-for='item in cmovies'>{
{
item}}</li>
</ul>
</div>
</template>
<script src='../js/vue.js'></script>
<script>
//父传子 props
const cpn = {
template:'#cpn',//id不要忘了
props:['cmovies','ctitle'],//接受父传过来的值
data() {
//组件中data是一个方法
return{
}
},
methods: {
},
}
const app = new Vue({
el: '#app',
data: {
movies:['海贼王','海盗船长','海王'],
title:'标题1'
},
//在父中创建模板
components:{
cpn,
}
})
</script>
</body>
Pass from child to parent: define event $emit()
<!DOCTYPE html>
<html lang='en'>
<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 @itemclick="cpnclick"></cpn>
</div>
<!-- 子组件 -->
<template id="cpn">
<div>
<!-- *把数据传过去，注意写item -->
<button v-for="item in categories" @click="btnclick(item)">{
{
item.name}}</button>
</div>
</template>
<script src='../js/vue.js'></script>
<script>
//定义子组件
const cpn = {
template: '#cpn',
data() {
//这里dada是一个函数
return {
categories: [
{
id: 'aaa', name: '家用电器' },
{
id: 'bbb', name: '手机电脑' },
{
id: 'ccc', name: '汽车用品' },
{
id: 'ddd', name: '个人清洁' }
]
}
},
methods: {
// *
btnclick(item) {
// console.log(item)
this.$emit('itemclick',item)//通过$emit自定义一个事件itemclick（名字随便写），item是传过去的数据
}
},
}
//父组件
const app = new Vue({
el: '#app',
data: {
},
components: {
cpn,
},
methods:{
//*监听子组件传过来的数据
cpnclick(item){
// 这个item可以随便取名字
// console.log(1111)
console.log('cpnclick',item)
}
}
})
</script>
</body>
</html>