vue组件

一

无论是否使用vue组件，都会使用以上的webpack，为了打包使用更简单。

以上是安装vue/cli脚手架，使用时能更为简单。第一步完成后，第三步会创建出项目，项目内包含脚手架，第四步可以直接使用这些文件。

项目目录执行顺序

创建的脚手架的文件，执行命令，是以index.html为模板，然后引入man.js文件，执行这些代码在浏览器上。不过这里添加了vue文件。

之前的写法

只需要引入vue函数，然后写构造函数就会执行，这个el下的，但是我们可以单独把el下的内容以及new Vue的对象和专门对这一块的style放到一块地方，即vue文件，又便于修改，更新。new Vue可以使得修改时无需JS去修改。方便。而这个用vue文件可以render属性把根文件放到vue内，便于修改。

组件化开发的原理

导入的vue文件内含有的是整个模板，在render会调用这个函数，函数的参数值也能调用，会对这个模板创建对应的DOM对象，会先执行script除却export外的，如果是vue时也是一样，直到不是，则执行模板创建对象，和style保留下来，export 的进行渲染，当执行结束，回来执行上一个，会渲染DOM对象。最终渲染出整个，且style是赋给了全部。

如何可以组件内发现有新的组件呢？导入模板，component上写了组件名：模板名。会执行render这个函数。对模板进行创建对象，创建对象的模板负责渲染，创建。渲染时发现对象内有commponent会进行渲染。组件内如果写el是整个data都是这个下，肯定不行，commponnet和组件名特有的，且每个组件之渲染时只会访问这个文件的export下的变量，1因为在这个JS文件内嘛。如果同时一个组件使用多次。渲染模板时可以时是单个文件的都可以都会知道什么意思比如看

到v-for渲染时都会多次创建。

组件的全局注册

在main.js上导入，用Vue.commponent（组件名，模板名）会在全局内生成一个组件名的对象.

render上的componet就是这个方法。生成了模板的前一步，但是没生成DOM对象，当《组件名》生成DOM对象。

style内是less的模式

写的时候给man.js都是默认是css因此，需要lang="less"是less模式，会先换成css。

data需要写成函数的解释

不同组件在内存当中是不允许访问的，当同一个组件的是写在同一块内存内的，如果data是对象，则这多个同一个组件都会去访问这个。但是如果data是函数，会调用这个函数的返回值放到同一块内存内，只允许这个组件访问。写的时候也是模板直接写函数返回对象的变量。

componnet内都用大驼峰模式。

Vue组件的style变成特有的

当写上scope是只是这个vue组件下的对象可用，原因：

每一个组件下都会有属性data-v-hash值，即使是生成两个同一个组件的，也是同一个属性，从这个模板下的style在原有基础上写下了属性选择器

父子组件之间的通信

父的数据传给子组件

我们知道组件之间都是独立的，不会互相能访问到数据的，但是如果需要传呢