| New file |
| | |
| | | <template> |
| | | <div> |
| | | {{ a }} |
| | | <br><br> |
| | | {{ result }} |
| | | <br><br> |
| | | {{ b }} |
| | | <br><br> |
| | | <el-button @click="b++">123123</el-button> |
| | | |
| | | <br><br> |
| | | {{ '父组件传值给子组件:'+car }} |
| | | |
| | | <br><br> |
| | | <el-button @click="gaveParent">子组件传递数据给父组件</el-button> |
| | | </div> |
| | | </template> |
| | | <script setup> |
| | | import {ref,computed,watch,defineProps,defineEmits} from 'vue' |
| | | let a = $ref([1,2,3,4,5,6]) |
| | | let b =ref(0) |
| | | |
| | | let props = defineProps({ |
| | | car:{ |
| | | String, |
| | | default:0 |
| | | } |
| | | }) |
| | | |
| | | const emit = defineEmits(['changeNum']) |
| | | const gaveParent = () => { |
| | | emit('changeNum','子组件给父组件传值了') |
| | | } |
| | | |
| | | //使用计算属性过滤出数组中小于2的 |
| | | const result=computed( () => { |
| | | return a.filter(item => item>2) |
| | | }) |
| | | |
| | | watch(b,(newValue,oldValue) => { |
| | | console.log("改变了当前值:"+newValue+" "+oldValue) |
| | | }) |
| | | |
| | | </script> |
| | | <style scoped> |
| | | |
| | | </style> |