懂个锤子Vue 项目工程化进阶⏫：

<!-- 模板结构 -->
<template>
    <div>
        <P>A组件: 声明成功!</P>
        <button @click="count--">-</button>
            <span>{{ count }}</span>
        <button @click="count++">+</button>
    </div>
</template>

<!-- 脚本结构 -->
<script> 
    export default {
        //原始定义:组件不支持\报错x)
        // data: {
        //     //基本数据类型使用
        //     count:1
        // },
        //组件函数式定义:
        data(){
            //因为: 一个组件可能会使用多次,如果通过原始属性,多个组件会依赖一个数据源;
            //通过: date(函数){ return {} } return返回对象,确保每一个组件都是独立的数据源;
            return {
                count:1
            }
        }
    }
</script>

<!-- 样式结构 -->
<!-- style中的样式,默认是作用到全局的
        scoped可以让样式变成局部样式,组件都应该有独立的样式,推荐scoped 原理）
        scoped给当前组件模板的所有元素,都会添加上一个自定义属性
        data-v-hash值 用于区分开不通的组件,css选择器后面,被自动处理,添加上了属性选择器;
-->
<style scoped>
    div{
        border: 3px solid red;
        margin: 30px;
    }
</style>

'props': {
	'校验属性名1': '类型', 		// Number String Boolean ...
    '校验属性名2': {
		type: '类型', 			// Number String Boolean ...
		required: true, 	 	 // 是否必填
		default: '默认值', 	   // 默认值
		validator (value) {
			// 自定义校验逻辑
			return 是否通过校验;
		};
	}
},

<!-- 模板结构 -->
<template>
  <div class="base-count">
    <button @click="handleSub">-</button>
      <span>{{ count }}</span>
    <button @click="handleAdd">+</button>
  </div>
</template>
<!-- 脚本结构 -->
<script>
export default {
  //子组件data数据
  data(){ return { dcount:0 } },
  props: {
    //props获取父组件数据;
    count: { type: Number, },
  },
  methods: {
    handleSub() {
      //子组件通过调用 $emit 方法触发一个自定义事件，并传递需要发送的数据
      this.$emit('changeCount', this.count - 1)
    },
    handleAdd() {
      this.$emit('changeCount', this.count + 1)
    },
  },
}
</script>
<!-- 样式结构 -->
<style></style>

<!-- 模板结构 -->
<template>
  <div id="app" style="border: 3px solid #000; margin: 10px">
    App 父组件
    <!-- 加减组件 -->
    <!-- 父组件通过在子组件标签上监听自定义事件,并绑定一个触发函数 -->
    <BaseCount :count="count" @changeCount="handleChange" ></BaseCount>
  </div>
</template>

<!-- 脚本结构 -->
<script>
import BaseCount from './components/BaseCount.vue'
export default {
  name: 'App',
  data(){ 
    return { count:1, } 
  },
  components: {
    BaseCount
  },
  methods:{
    handleChange(newVal){
      //函数获取: 子组件传递的数据,给其赋值count;
      this.count = newVal;
    }
  }
}
</script>
<!-- 样式结构 -->
<style></style>

//全局工具包
//utils/EventBus.js
import Vue from 'vue';
const EventBus = new Vue();
export default EventBus;       	//对外暴漏公共实例;	

//main.js
//const EventBus = new Vue();
//Vue.prototype.$bus = EventBus;
//将一个新的 Vue 实例即EventBus)挂载到Vue的原型上,并命名为 $bus
//这样,所有的 Vue 组件都可以通过 this.$bus 访问这个事件总线;

<template>
  <div class="base-b">
    <div>我是B组件（发布方）</div>
    <button @click="sendMsgFn">发送消息1</button>
	<button @click="sendMsgFn2">发送消息2</button>
  </div>
</template>

<script>
//引入局部事件总线
import Bus from '../utils/EventBus'
export default {
  methods: {
    //通过 `$bus.$emit` 方法发送事件，并传递数据；
    sendMsgFn() { Bus.$emit('sendMsg', '引入局部事件总线') },
    sendMsgFn2() { this.$bus.$emit('sendMsg2', 'this.$Bus全局事件总线') },
  },
}
</script>
<style scoped><!-- 省略Css样式 --></style>	

<template>
  <div class="base-a">
    我是A组件（接受方）
    <p>{{msg}}</p>  
  </div>
</template>

<script>
import Bus from '../utils/EventBus'
export default {
  data() { return { msg: '', } },
  created() {
    Bus.$on('sendMsg', (msg) => { this.msg = msg });		//接受局部事件总线消息
    this.$bus.$on('sendMsg2', (msg) => { this.msg = msg });	//接受全局事件总线消息
  },
}
</script>
<style scoped><!-- 省略Css样式 --></style>	

<template>
  <div id="app" style="border: 3px solid #000; margin: 10px">
    App 父组件
    <Son3></Son3>
  </div>
</template>

<script>
import Son3 from './components/Son3.vue';
export default {
  name: 'App',
  components: { Son3, },
  data() { return { color: 'pink', userInfo: { name: 'zs', age: 18, }, } },
  //父组件使用 provide 提供数据：
  provide() {
    return {
      // 简单类型是非响应式的
      color: this.color,
      // 复杂类型 是响应式的
      userInfo: this.userInfo,
    }
  },
}
</script>

<template>
  <div class="grandSon">
    我是GrandSon
    {{ color }} -{{ userInfo.name }} -{{ userInfo.age }}
  </div>
</template>

<script>
export default {
  //子组件使用 inject 接收数据：
  inject: ['color', 'userInfo'],
}
</script>