复习组件间数据通信

第一种：父==>子 props传递数据;子==> 触发自定义事件的形式

 

第二种方法使用

 

 app.vue代码

<template>
  <div>
    我是主组件app.vue
    <h2>使用子组件Student</h2>
    <Student></Student>
  </div>

</template>

<script>
  import Student from "./components/Student.vue";
  import {  provide,reactive} from 'vue'

export default {
  name: 'App',
  components: {
    Student

  },
  setup(){ //vue合成api
    const student=reactive({
      naem:'zxh',
      age:28,
      sex:'男'
    })
    provide('stu',student)
  }
}
</script>

student.vue

<template>
    <div>
        <h1>我是子组件student.vue</h1>
        <p>{{name}}</p>
        <p>{{age}}</p>
        <p>{{sex}}</p>
    </div>
</template>

<script>
    import {inject} from 'vue';
    export default {
        name: "Student",
        setup(){
            const student=inject('stu');
            return{...student}
        }
    }
</script>

<style scoped>

</style>

非父子组件之间的通信合成

第一种：事件总栈Bus（空vue对象）

第二种:状态管理库vuex

Vuex是一个专为Vue.js应用程序开发的状态管理库。状态就是指组件之间共享的数据

APlsetup:vue3最重要的新特性之一

旧代码

<template>
  <div>
  <h1 @click="changeCount">{{count}}</h1>

  </div>

</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      count:0
    }
  },
  methods:{
    changeCount(){
      this.count++
    }
  }

}
</script>

新代码

<template>
  <div>
  <h1 @click="changeCount">{{count}}</h1>

  </div>

</template>

<script>
import {ref} from 'vue'
// ref 在setup中只能包装字符串或数字形式的数据(值)，使其变为响应式数据
export default {
  name: 'App',
  setup(){//合成api
    const count=ref(0);
    function changeCount() {
      count.value++;

    }
    return{count,changeCount}

  },


}
</script>