组件之父子传值

1.父组件传给子组件

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

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

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

<son :text='msg'></son>

<template>
  <div>
    son组件
    <div>父组件的值{{ text }}</div>
  </div>
</template>

<script>
export default {
  props: ["text"],
  data() {
    return {};
  },
  methods: {},
  components: {},
};
</script>

<style scoped lang="less">
</style>

<template>
  <div class="about">
    <h1>This is an about page</h1>
    父组件
    <son :text="age"></son>
  </div>
</template>

<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.在子组件中定义触发事件

<button @click="give">子组件给父组件传值</button>

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

give(){

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

    }

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

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

<son @getIt='getVal'></son>

后面代表父组件的事件名

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

 getVal(v){

      this.sonVal=v

      console.log(v);

    }

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

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

provide('变量名'，数据)

provide('data',oldMsg)

inject（‘变量名’）

inject('data')