一、组件自定义事件实现子组件给父组件传值
注意：Vue官方推荐始终使用kebab-case(短横线隔开式)给自定义事件命名
Vue组件中camelCased (驼峰式) 命名与 kebab-case（短横线命名）
在vue官网上有这样的一句话：
“camelCase vs. kebab-case
HTML 特性是不区分大小写的。所以，当使用的不是字符串模版，camelCased (驼峰式) 命名的 prop 需要转换为相>对应的 kebab-case (短横线隔开式) 命名： 如果你使用字符串模版，则没有这些限制。”
子组件Header.vue
<template><h2>头部组件---<button @click="sendParent">执行父组件的自定义事件</button></h2></template><script>export default {name: "",data() {return {msg:"头部组件"}},methods: {sendParent(){console.log("触发自己的方法~！");// 触发父组件的自定义事件,并传值this.$emit("send",this.msg);}}}</script><style scoped>h2{text-align: center;background: #000000;color:#fff;}</style>
父组件Home.vue
<template><v-header @send="getChild"></v-header><br>首页父组件</template><script>import Header from "@/components/Header";export default {name: "",data() {return {title:"首页组件"}},components:{"v-header":Header,},methods: {getChild(val){console.log("我是父组件的方法");// 接收子组件传递的参数console.
