1.父组件传给子组件

（1）首先在子组件中把props:{ }空对象改为空数组props:[ ],里面写要接收值的变量，比如：props:[ 'text' ]

(2)在父组件模板中，引入子组件，注册组件，使用组件，

(3)往子组件身上添加属性，v-bind:text='msg'或者 :text='msg'

 
<script>
export default {
  props: ["text"],
  data() {
    return {};
  },
  methods: {},
  components: {},
};
script>
 
<style scoped lang="less">
style>

 
<script>
import son from "@/components/son.vue";
export default {
  props: {},
  data() {
    return {
      age: 200,
    };
  },
  methods: {},
  components: {
    son,
  },
};
script>
 
<style scoped lang="less">
style>

2.子组件传值给父组件

1.在子组件中定义触发事件

子组件给父组件传值

2.在子组件的methods中写点击事件函数

give(){

        this.$emit('getIt', this.sonLists)

    }

//sonLists表示子组件要传给父组件的值

3.在父组件中调用子组件中定义的函数名

后面代表父组件的事件名

4.在父组件methods中写事件函数

 getVal(v){

      this.sonVal=v

      console.log(v);

    }

//sonVal在父组件中定义，来接收子组件传过来的值

3.vue3的无敌传值，只要是组件的子孙后代就能轻易得到父级，爷级，祖宗级的值

provide('变量名'，数据)

provide('data',oldMsg)

inject（‘变量名’）

inject('data')