上图红框内的按钮点击没有效果,该部分是ratingselect组件在ratings.vue里面引用的时候出现的问题,但是在food.vue里面引用却是可以的
ratingselect组件代码
1 2 3 4 5 6 7 8 9 10 11 12 13 | < template > < div > < div > < span class = "block positive" @ click = "select(2,$event)" :class = "{'active':selectTyped===2}" >{{desc.all}}< span >{{ratings.length}}</ span ></ span > < span class = "block positive" @ click = "select(0,$event)" :class = "{'active':selectTyped===0}" >{{desc.positive}}< span >{{positives.length}}</ span ></ span > < span class = "block negative" @ click = "select(1,$event)" :class = "{'active':selectTyped===1}" >{{desc.negative}}< span >{{negatives.length}}</ span ></ span > </ div > < div @ click = "toggleContent" :class = "{'active':onlyContented}" > < span ></ span > < span >只看有内容的评价</ span > </ div > </ div > </ template > |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | <script> import Vue from 'vue' ; //定义常量选择类型 const POSITIVE = 0; const NEGATIVE = 1; const All = 2; export default { props: { ratings: { type: Array, default () { return []; } }, selectType: { type: Number, default : All }, onlyContent: { type: Boolean, default : false //如果没有传递的话才默认 }, desc: { type: Object, default () { return { all: '全部' , positive: '满意' , negative: '不满意' }; } } }, data() { return { selectTyped: this .selectType, //对props接收多了的值存一下,以便后面操做不报错 onlyContented: this .onlyContent }; }, computed: { positives() { return this .ratings.filter((rating) => { //过滤每一条rating, return rating.rateType === 0; }); }, negatives() { return this .ratings.filter((rating) => { return rating.rateType === 1; }); } }, methods: { select(type, event) { if (!event._constructed) { return ; } this .selectTyped = type; //修改选择的类型 this .$parent.$emit( 'ratingType' , this .selectTyped); //向父元素派发ratingType事件并且传递过去type值 console.log( this .$parent); }, toggleContent(event) { if (!event._constructed) { return ; } this .onlyContented = ! this .onlyContented; this .$parent.$emit( 'onlyContented' , this .onlyContented); } } }; </script> |
food组件里面引用后可以正常点击,以下是food.vue部分代码截图
food.vue
这里的按钮是可以点击切换高亮样式的
掌握Vue1.0到2.0再到2.5最全版本应用与迭代,打造极致流畅的WebApp
了解课程