parents通过属性(props/properties)传递数据给子组件,子组件通过传递事件将数据传递给父组件。在实际开发中,俩玩意传递的方式是一样的。
怎么传递?
子组件是不能直接引用父组件的数据的
子传父的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--父组件模板-->
<div id="app">
<!--父组件监听这个事件-->
<zyw @item-click="zywClick"></zyw>
</div>
<!--子组件模板-->
<template id="ccc">
<div>
<button v-for="item in categories"
@click="btnClick(item)">
{{item.name}}
</button>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
/*子组件*/
const zyw = {
template: `#ccc`,
data() {
return {
categories: [
{id: 'aaa', name: '热门推荐'},
{id: 'bbb', name: '手机数码'},
{id: 'ccc', name: '家用家电'},
{id: 'ddd', name: '电脑办公'},
]
}
},
methods: {
btnClick(item) {
/* 子组件 发射 一个自定义事件 */
this.$emit('item-click', item)
}
}
}
/*父组件*/
const app = new Vue({
el: '#app',
data: {
},
components: {
// 注册局部组件语法糖的写法
zyw
},
methods: {
//接收
zywClick(item) {
console.log('zywClick', item)
}
}
})
</script>
</body>
</html>