标签：lap color ted const nbsp 数组 name style 事件总线
父组件：使用绑定把值传给子组件
子组件：通过props获取父组件传入的值（可以进行类型限制或默认值）
<body> <div id="app"> <!-- 只能有一个root对象，所以数据的使用必须在一个div里面 --> <cpn :cmovies="moviese" :cmessage="message"></cpn> </div> <template id="cpn"> <div> <ul> <li v-for="movie in cmovies"> {{movie}} </li> </ul> <h2>{{cmessage}}</h2> </div> </template> <script> // 父传子: props const cpn = { template: ‘#cpn‘, // props: [‘cmovies‘, ‘cmessage‘], props: { // 类型限制 // cmovies: Array, // cmessage: String // 提供默认值,以及毕传值,数组不能传空数组 cmovies: { type: Array, default: [‘Default‘, ‘Default‘], }, cmessage: { type: String, default: ‘Default‘, request: true, } }, data() { return {} }, } //创建Vue实例,得到 ViewModel const app = new Vue({ el: ‘#app‘, data: { message: ‘Smallstars‘, moviese: [‘海王‘, ‘火影‘] }, methods: {}, computed: {}, components: { cpn }, }); </script> </body>
子组件：通过监听点击事件，然后使用$emit发射事件
父组件：监听子组件的发射事件
<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: 1, name: ‘热门推荐‘ }, { id: 2, name: ‘手机数码‘ }, { id: 3, name: ‘家用家电‘ }, { id: 4, name: ‘电脑办公‘ }, ] } }, methods: { btnClick(item) { // 发射事件 this.$emit(‘itemclick‘, item) } }, } //创建Vue实例,得到 ViewModel const vm = new Vue({ el: ‘#app‘, data: {}, methods: { // 父组件对子组件传来的事件进行操作 cpnclick(item) { console.log(‘cpnclick‘, item); } }, computed: {}, components: { cpn }, }); </script> </body>
详见Vuex专题
标签：lap color ted const nbsp 数组 name style 事件总线
原文地址：https://www.cnblogs.com/smallstars/p/13509174.html
