vue父子组件进行通信方式原来是这样的

//父组件
 <HelloWorld :title="title"></HelloWorld>
//子组件
  props: ["title"],

//父组件：
<HelloWorld :title="title"></HelloWorld>
//子组件：
  props: {
    title:{
      type:String,
      required:true,
      default() {
        return "我是title"
      }
    }
  },
//上面default为什么是一个函数？
因为是一个组件，组件在其他组件都能使用，并且如果default是一个key;value形式，并且value是一个引用
类型的值，则如果要更改props的值，则其他组件的值也会更改。

type属性的类型有:String,Number,Boolean,Array,Object,Date, Function,Symbol。

props:{
	messageinfo:String,
	propsA:Number，
	propsC:{
		type:String,
		required:true
	},
	propsE:{
		type:Object,
		default(){
			return {message:"hello"}
		}
	},
	//自定义验证函数
	title:{
      validator(value) {
        console.log("hhh")
        return ["hello","world"].includes(value)
      }
    }
}

    //父组件
    <HelloWorld :mess-age="title"></HelloWorld>
    //子组件
    props: {
    messAge:{
      type:String,
    }
  },

<template>
  <div>{{ messAge }}
    <h1 :class="$attrs.class">hhhhh</h1>
  </div>
</template>

<template>
  <h1>{{ messAge }}</h1>
  <h1>哈哈哈</h1>
  <h1 :class="$attrs.class">呵呵呵</h1>
</template>

1、当子组件有一些事情发生的时候，比如在组件中发生点击，父组件需要切换内容。2
2、子组件有一些内容想要传递给父组件。
3、子组件通过$emit()触发事件，并且在emits中进行注册事件。
4、注册的事件可以是数组类型的，也可以是对象类型。

//子组件
<template>
  <button @click="increment">+1</button>
  <button @click="decrement">-1</button>
</template>
<script>
export default {
  emits:["add", "sub"],
  data() {
    return {
    }
  },
  methods: {
    increment: function () {
      this.$emit("add")
    },
    decrement: function () {
      this.$emit("sub")
    },
  },
};
</script>
<style scoped></style>

//父组件
<template>
  <h1>当前的数字是:{{counter}}</h1>
  <HelloWorld @add="addOne" @sub="subOne"></HelloWorld>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue"
export default {
  components: { HelloWorld },
  data() {
    return {
      counter: 0
    }
  },
  methods:{
    addOne() {
      this.counter++
    },
    subOne() {
      this.counter--
    }
  }
}
</script>
<style scoped></style>

//父组件
<template>
  <h1>当前的数字是:{{counter}}</h1>
  <HelloWorld @add="addOne" @sub="subOne" @addN="addNumbers"></HelloWorld>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue"
export default {
  components: { HelloWorld },
  data() {
    return {
      counter: 0,
    }
  },
  methods:{
    addOne() {
      this.counter++
    },
    subOne() {
      this.counter--
    },
    addNumbers(value) {
      this.counter += parseInt(value)
    }
  }
}
</script>
<style scoped></style>

//子组件
<template>
  <button @click="increment">+1</button>
  <button @click="decrement">-1</button>
  <input type="text" v-model="num" />
  <button @click="incrementN">+N</button>
</template>
<script>
export default {
  emits: {
    add:null,
    sub:null,
    addN:(dispatch) => {
      if(dispatch > 10) {
        return true
      }
      return false
    }
  },
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    increment: function () {
      this.$emit("add");
    },
    decrement: function () {
      this.$emit("sub");
    },
    incrementN: function () {
      this.$emit("addN", this.num);
    },
  },
};
</script>
<style scoped></style>

emits: {
    add:null,
    sub:null,
    addN:(dispatch) => {
      if(dispatch > 10) {
        return true
      }
      return false
    }
  }