vue项目构建及api 2019.5.15

1. vue组件注册的几种方法

（1）局部注册

1）

2）通过 Babel 和 webpack 使用 ES2015 模块

App.vue文件

（2）全局注册

main.js文件

全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生

这里刚开始运行项目时会报错：

Reason:

因为vue模板的package.json的main字段默认为runtime模式，指向了"dist/vue.runtime.common.js"位置

代码import Vue from "vue"被解析为import Vue from "vue/dist/vue.js";

改变runtime模式指定的位置为解析的地址,即将默认指定的地址改为解析出来的地址，即见方法1,2

solved:

2. scoped属性

<!-- Add "scoped" attribute to limit CSS to this component only -->

<!-- 即实现样式私有化（模块化），不对全局造成污染， -->

<!-- 只对该组件有用 -->

eg: 组件HelloWorld和Vuemodule；

两个组件中都有a标签；

组件HelloWorld的style设置scoped属性，则a标签 的样式只对该组件有用，不会影响Vuemodule组件；

组件HelloWorld

Vuemodule组件

显示

 

3. props

（1）props down 父传子，events up 子传父

// prop: 所有的prop都使得其父子prop之间形成了一个单向下行绑定，

// 即父级prop的更新会向下流动到子组件中，反之则不行

// 父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息

eg:子组件HelloWorld, 父组件App.vue

子组件HelloWorld

父组件App.vue

（2）props驗證

eg: 驗證title值

（3）替换、合并已有的特性

<!-- 绝大多数特性，父组件提供的值会替换掉组件内部设置好的值 -->

<!-- eg: type值 -->

<!-- 但是 class和style特性会合并两个值 -->

eg: 子組件attr

設置class a

父組件App

設置class b

最後class a, b將會合併

（4）禁用特性继承 （這裡有問題。沒有實現）