vue component 组件化开发 和 组件通信

vue component 组件化开发
模块化 和 组件化
模块化：可以将一个js文件，按照功能拆分成多个js文件，一个js文件一个模块
核心点：拆分 封装
组件化：可以将页面分成一个个组件，组件有自己的独立的 结构样式行为
组件的概念
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。
在vue中都是组件化开发的，组件化开发就是把一个完整的页面分割成一个一个的小组件。

vue组件分为全局组件和局部组件
全局组件：在所有的vue实例中都能使用
局部组件：只有在当前vue实例中能够使用
全局组件

//要注册一个全局组件，可以使用 Vue.component(tagName, options)。
tagName：标签名，也就是组件的名字
options：选择项，期权
template：模板样板
//注册一个全局的组件
// Vue.component(tagName, options)
Vue.component("hello", {
    template: '<h3>我是全局组件！</h3>'
});

局部组件

//在vue实例的内部，通过components属性来定义局部组件
components: {
    "my-button": {
        template: `
        <div>
        <h1>我是一个标题</h1>
        <p>我是一个段落</p>
        </div>
        `
    }
}

使用组件
定义的组件，可以直接当成html标签使用
组件定义的注意点：
1.不要使用内置的html标签
组件的命名规范：可以加上命名前缀
el-button el-table
2.一个组件就是一个整体，必须有且只有一个根元素 root element
组件的其他配置项
组件是可以服用的vue实例，所以vue实例怎么配，组件就怎么配
配置区别：
1.根实例。有el参数，组件需要配置template
2.组件中的data必须是一个函数，函数内部需要返回一个对象（保持数据的独立）
支持data methods computed watch 八大钩子函数 。。。。。
列外：el是根实例独有的，不过组件一般会配置 template
data对于根实例是一个对象，对于组件data是一个函数，且返回一个对象
组件通信的说明
父传子 ，子传父 ，非父子
v-model 是能用的，但是v-model不要和props传递过来的数据双向绑定
父传子 ：
1给子组件以添加属性的方式进行传值
规范：（添加的属性名全小写或者-或者_但是不要出现驼峰）
2在子组件中，通过props进行接收，传递的参数列表
接收到的props数据，和data一样可以直接在组件中使用

注意：
加了：才会动态解析data中的msg，不然就是写死de字符串
不是一定要重名
前面是名字，后面是解析的变量
修改组件的样式，不是通过标签选择器进行修改，而是通过类选择器进行修改.product
组件也是可以遍历展示的

子传父
遵循单项数据流，不要直接修改父组件的数据：让父组件的数据自己去修改
1.在子组件中通过zhu’ce触发事件的同时进行传值
注！加了doller符号代表的就是vue里面内置的语法，是为了与普通的属性名或方法做区分
this.$emit (函数名，参数一，参数二，参数三…)

事件名的命名规范：要求全小写或者-或者_但是不能驼峰 方法名的命名规范是驼峰
2.在父组件中，给子组件注册相对应的事件，然后通过参数进行接受

非父子 bus
非父子用的非常少，了解就行了，vuex会解决
1.先创建一个都能访问到的 事件总线 （event bus） 实际上就是一个空的vue实例
2.在A组件中，注册触发bus的事件，触发的同时进行传值
bus.￥emit(事件名，参数一，参数二…)
3.在B组件中，给bus注册相对应的事件，接受参数
bus.￥on（事件名，事件处理函数）
bus的事件注册的越早越好，因为只有注册了事件，将来才能触发到