vue3.0中父组件与子组件的通信传值props与$emit :VOA模式

父组件传值到子组件

所有的 props 都遵循着单向绑定原则，props 因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递（注意：只要父组件传给子子组件的值发生变动，父组件会自动的传给子组件，注意：是自动的传送）。这避免了子组件意外修改父组件的状态的情况，不然应用的数据流将很容易变得混乱而难以理解，
另外，每次父组件更新后，所有的子组件中的 props 都会被更新到最新值，这意味着你不应该在子组件中去更改一个 prop。若你这么做了，Vue 会在控制台上向你抛出警告:（即：父组件传递的参数值子组件只能用，不能修改）

 父组件

<template>
  <div>
    <!-- <ChildModule mytitle="我是标题" aa="张三" bb="李四" v-bind="{ name: '王五', age: 19 }" ></ChildModule> -->
    <!--也可以直接v-bind一个对象-->
    <ChildModule mytitle="我是标题" aa="张三" bb="李四" v-bind="myuser"></ChildModule>
  </div>
</template>
<script>
import ChildModule from "./components/ChildModule.vue" //导入ChildModule组件模板
export default {
  data() {
    return {
      myuser: {
        name: "钱七",
        age: 19
      }
    }
  },
  components: {
    ChildModule: ChildModule //注册局部子组件ChildModule：也可以写成ChildModule:ChildModule
  },
  methods: {

  }
}
</script>

子组件：用props 数组来接收参数

<template>
    <div>
        {{ mytitle }}-- {{ aa }}-- {{ bb }}-- {{ name }}-- {{ age }}
    </div>
</template>
<script>
export default {
    // 用props 数组来接收
    props: ["mytitle", "aa", "bb", "name", "age"]
}
</script>

子组件：用props对象来接收参数

<template>
    <div>
        {{ mytitle }}-- {{ aa }}-- {{ bb }}-- {{ name }}-- {{ age }}--{{ isShow ? "是" : "否" }}
    </div>
</template>
<script>
export default {
    // 用props 数组来接收
    // props: ["mytitle", "aa", "bb", "name", "age", "isShow"]
    props: {
        mytitle: String,
        aa: [String, Number], //表示此参数可以接收String和Number类型
        bb: { //还可以自定义校验参数
            required: true, //true 表示属性必传；false 表示可以不传属性；
            type: String, //表示属性只能是String类型的。也可以指定多个类型如type:[String,Number]
            default() {// 如果该参数没用值则指定一个默认值abc ；也可以直接default: "abc" 
                return "abc"
            },
            //也可以写成：validator:value=>['success','warning','danger','error'].indexOf(value)>-1
            validator(val) {
                //检查参数的值是否是"success"或者"warning"或者"danger"或者"error"，如果是则返回true,不是则返回false               
                return ["success", "warning", "danger", "error"].includes(val)
            }
        },
        name: String,
        age: Number,
        isShow: Boolean

    }
}
</script>

下面列举了所有可能的数据类型 

export default {
	props: {
        propA : String,  //字符串类型
        propB : Number,  //数字类型
        propC : Boolean, //布尔值类型
        propD : Array,  //数组类型
        propE : Object, //对象类型
        propF : Date,  //日期类型
        propG: Function, //函数类型
        propH: Symbol, //符号类型
    }
}

子组件传值到父组件

父组件

<template>
  <div>
    <!--在这里添加一个监听事件，这个监听事件的名称可以自己定义，一般用event，当然你也可以叫aaa,如v-on:aaa="handelClick" 主要用于子组件传递参数给父组件-->
    <!-- <ChildModule v-on:event="handelClick"></ChildModule> -->

    <!--在这里添加多个个监听事件，这个监听事件的名称可以自己定义-->
    <ChildModule v-on:event="handelClick" v-on:aaa="handelClick2"></ChildModule>
  </div>
</template>
<script>
import ChildModule from "./components/ChildModule.vue" //导入ChildModule组件模板
export default {
  inheritAttrs:false,
  data() {
    return {
    
    }
  },
  components: {
    ChildModule: ChildModule //注册局部子组件ChildModule：也可以写成ChildModule:ChildModule
  },
  methods: {
    handelClick(user){
      console.log(user);
      console.log(user.name);
      console.log(user.age);
    },
    handelClick2(a,b){
      console.log(a);
      console.log(b);
    }
  }
}
</script>

子组件

<template>
    <div>
        <button v-on:click="handelClick">点击</button>
        <button v-on:click="$emit('event',user)">点击</button><!--我们可以简写成这样，直接调用父组件中的event监听事件，将值传递给父组件，这样就可以不用再定义一个方法了-->
        
        <button v-on:click="handelClick2">点击2</button>
    </div>
</template>
<script>
export default {
  data(){
    return{
        user:{
            name:"张三",
            age:19,
            emial:"abc@123.com"
        }
    }
  },
  methods:{
    handelClick(){
        //$emit的主要作用是子组件可以通过使用$emit,让父组件监听到自定义事件 ，以及传递的参数      
        this.$emit("event",this.user)//调用父组件中的event监听事件，将值传递给父组件（支持传递多个参数，this.$emit("event",this.user,123,456)）
    },
    handelClick2(){
        this.$emit("aaa",123,"hello")//调用父组件中的aaa监听事件，将值传递给父组件（支持传递多个参数，this.$emit("aaa",this.user,123,456)）
    }
  }
}
</script>

父组件直接从子子组件中获取值$refs

不建议使用会增加组件之间的耦合度，一般用于第三方插件的封装

ref如果绑定在dom节点上，拿到的就是原生dom节点。
ref如果绑定在组件上，拿到的就是组件对象，可以实现通信功能

父组件

<template>
  <div>
    <button v-on:click="handelClick">打印看看</button>
    <ChildModule ref="mychild"></ChildModule>
    <input type="text" ref="myinput">
    <div type="text" ref="mydiv">wowo</div>
  </div>
</template>
<script>
import ChildModule from "./components/ChildModule.vue" //导入ChildModule组件模板
export default {
  inheritAttrs: false,
  data() {
    return {

    }
  },
  components: {
    ChildModule: ChildModule //注册局部子组件ChildModule：也可以写成ChildModule:ChildModule
  },
  methods: {
    handelClick() {
      console.log(this.$.refs.myinput);
      console.log(this.$.refs.mydiv);
      console.log(this.$.refs.mychild);

      this.$.refs.myinput.value="abc";
      this.$.refs.mydiv.style.background='red'; //
      
      this.$refs.mychild.user.name="李四"; //直接获取子组件的user.name值并重新赋值
    }
  }
}
</script>

子组件

<template>
    <div>
       {{user.name}}
    </div>
</template>
<script>
export default {
  data(){
    return{
        user:{
            name:"张三",
            age:19,
            emial:"abc@123.com"
        }
    }
  },
  methods:{
  
  }
}
</script>