02-Vue组件通信概念单向数据流从父到子的数据流向,叫单向数据流 , 子组件修改,不通知父级,造成数据不一致性,子组

创建组件>引入组件>注册组件>使用组件(当前页面当做标签使用)

1.1 局部注册

语法: components: { "组件名": 组件对象}

1.2 全局注册

全局入口在main.js, 在new Vue之上注册

语法: Vue.component("组件名", 组件对象)

口诀: 哪部分标签复用, 就把哪部分封装到组件内; 组件内template只能有一个根标签 ; 组件内data必须是一个函数, 独立作用域 ; style上加scoped, 组件内的样式只在当前vue组件生效

从父到子的数据流向,叫单向数据流 , 子组件修改,不通知父级,造成数据不一致性,子组件依赖父传入的值 , vue规定props里的变量,本身是只读的,不能修改

问题?怎样才能修改子组件接收到的值? 影响父亲,然后根据响应式来影响儿子们

父组件常量属性名="属性值" || 变量 :属性名="变量名" data(){ return{ 变量名:变量值 }}

子组件 props:["属性名","属性名"] 接收后直接在插值表达式内使用

父组件 @自定义事件名="父组件函数名" 执行父函数 Fn(形参){}

子组件 @事件名 = "子组件函数名" 执行子函数 fn(){ this.$emit("自定义事件名",实参)}

provide 和 inject

第一步: 新建空白Vue对象-监听和触发事件

核心语法: EventBus/index.js- 定义事件总线bus对象 import Vue from 'vue' // 导出空白vue对象 export default new Vue()

第二步: 两个组件都要引入空白vue对象(EventBus)

第三步: 引入>注册>使用

发送方组件: eventbus.$emit("自定义事件名",实参)

接收方组件: eventbus.$on("自定义事件名",回调函数)

总结: 空的Vue对象, 只负责 $on注册事件,$ emit触发事件, 一定要确保$on先执行

首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。

分析需求：确定业务需求，把页面中可以复用的结构，样式以及功能，单独抽离成一个组件，实现复用
具体步骤：Vue.component 或者在new Vue配置项components中, 定义组件名, 可以在props中接受给组件传的参数和值，子组件修改好数据后，想把数据传递给父组件。可以采用$emit方法。

父向子 -> props定义变量 -> 父在使用组件用属性给props变量传值

子向父 -> $emit触发父的事件 -> 父在使用组件用@自定义事件名=父的方法 (子把值带出来)

每个组件都是 Vue 的实例, 为了独立作用域, 不让变量污染别人的变量

给组件命名有两种方式(在Vue.Component/components时)，一种是使用链式命名"my-component"，一种是使用大驼峰命名"MyComponent"，

因为要遵循W3C规范中的自定义组件名 (字母全小写且必须包含一个连字符)，避免和当前以及未来的 HTML 元素相冲突

然后在任何后代组件里，我们都可以使用 inject 选项来接收指定的我们想要添加在这个实例上的属性

provide: function() { return { articleId: this.articleId }; }

子组件接受父组件提供的属性，这种接收不论父子组件嵌套层级多深，都可以拿到数据。比起属性绑定一层一层往下传看起来更具有灵活性。但是该技巧不要滥用，它会使重构变得更加困难，同时所提供的 property 是非响应式的。

inject: ['articleId'], inject: { articleId: { type: [Number, String], default: null } },