radio.vue 687 B

123456789101112131415161718192021222324252627282930313233343536
  1. <template>
  2. <icon-comp :img="checkedValue ? 'checked' : 'unchecked'" size="32" @click.stop="clickRadio"/>
  3. </template>
  4. <script>
  5. import iconComp from './icon.vue'
  6. export default {
  7. components: {iconComp},
  8. props: {
  9. checked: {//默认是否选中
  10. type: Boolean,
  11. default: false,
  12. },
  13. },
  14. computed: {
  15. checkedValue() {//要放到这里,这样才会和外部的数据同步
  16. return this.checked
  17. }
  18. },
  19. data() {
  20. return {
  21. // checkedValue: this.checked,
  22. }
  23. },
  24. methods: {
  25. clickRadio() {
  26. // this.checked = !this.checked //不能修改prop,不然会报错
  27. this.$emit("change", !this.checked) //由外部去同步这个数据
  28. },
  29. },
  30. }
  31. </script>
  32. <style>
  33. </style>