Vue3中的props和emit

Vue3父子组件之间的相互通信

1.第一种写法:父组件向子组件传递数据

  有<script setup></script>进行父组件向子组件传值
  
  father组件
  <template>
   <son :count='count'></son>
  </template>
  <script setup>
      import {ref} from 'vue'
      import son from './son.vue'
      let count = ref(0)
  </script>
  
  son组件
  <template>
  <span>{{count}}</span>
  </template>
  <script setup>
      // 不导入直接使用defineProps直接提示错误
      import {defineProps,} from 'vue'
      // defineProps() 这个方法不能打印不然浏览器报错
         如果想打印看看是什么
         let props = defineProps(['count'])
         // 打印的是proxy响应式对象,因为defineProps()函数内部自动处理,返回回来是一个proxy响应式对象
         console.log(props) 
         
         如果只读可以不用存储在声明props变量,可以直接使用,如果需要写逻辑(并且传过来值是复杂数据类型)就需要保存到props中
         defineProps(['count']) //defineProps()函数已经接收父组件传递子组件数据内部处理好了直接在模板使用即可
      
         defineProps(['count'])这是数组写法(不常用)
      
        下面是对象写法
         defineProps({ // 数据不复杂可以这样使用
             count:Number
         })
      
         defineProps({ //常用 
             count:{
                 type:Number
             }
         })
      
      ----------------------------------------------------------------------
      注意
      如果声明一个props变量保存defineProps()函数进行使用的话
      let props = defineProps({
                  count:{
                      type:Number
                  }
      })
      
      // 不能使用解构,失去响应式,并且会提示报错信息
      let {count} = props
      // 不能使用赋值方式,失去响应式,并且提示错误信息
      let num = props.count
      
      可以使用toRef、toRefs解决上面两个问题具体看Vue官网API中的setup如果访问props
  </script>

2.第二种写法:父组件向子组件传递数据

     father组件
    <template>
      <son :count='count'/>
    </template>
    <script setup>
        import son from 'vue'
        import {ref} from 'vue'
        let count = ref(0)
    </script>
    
    son组件
    <template>
    <span>{{props.count}}</span>
    </template>
    <script>
      import {toRefs,toRef} from 'vue'
      export default{
          props:{
             count:{
                 type:Number
             }  
          }
      },
         setup(props){
          问题
          // 不能使用解构,失去响应式,并且会提示报错信息
           let {count} = props
         // 不能使用赋值方式,失去响应式,并且提示错误信息
           let num = props.count
           
           解决
           let { count } = toRefs(props) 
           console.log(count) // 结构出来是一个count的ref的响应式
    
           let count = toRef(props,'count') // 赋值出来是一个count的ref的响应式
           return {
             props,
           }
      }
    </script>
    ```

 4.事件传参(子组件传递父组件)

第一种写法:子组件向父组件传递参数

```vue
<script setup></script>写法

 father组件
<template>
  第一种写法
  <son @count='fn'/>
  第二种写法
  <son @count='count = $event'/>
  第三种写法
  <son @count='n = > count = n'/>
</template>
<script setup>
    import son from 'vue'
    import {ref} from 'vue'
    let count = ref(0)
    第一种写法
    let fn = val =>{
        count.value = val
    }
</script>

son组件
<template>
<el-button @click='btn'></el-button>
</template>
<script setup>
    import {defineEmits} from 'vue'
    // defineEmits必须写在最上面,不能写在方法中
    // defineEmits就是声明子组件传递父组件的事件
    let emit = defineEmits(['count'])
    let btn = () =>{
        emit('count',10) // 事件和值
    }
</script>

第二种写法:子组件向父组件传递数据

 father组件
<template>
  第一种写法
  <son @count='fn'/>
  第二种写法
  <son @count='count = $event'/>
  第三种写法
  <son @count='n = > count = n'/>
</template>
<script setup>
    import son from 'vue'
    import {ref} from 'vue'
    let count = ref(0)
    第一种写法
    let fn = val =>{
        count.value = val
    }
</script>

son组件
<template>
<el-button @click='btn'></el-button>
</template>
<script>
   export default{
      setup(props,content){
          function btn(){
              content.emit('count',10)
          }
      }
   }
</script>