vue 项目总结
vue组件传值的三种方式
父传子：父子组件的关系可以总结问prop向下传递，事件向上传递
子组件：
<template>
<div id="container">{{msg}}</div>
</template>
<script>
export default {
data() {
return {};
},
props:{
msg: String
}
};
</script>
父组件：
<template>
<div id="container">
<Child :msg="text"></Child>
</div>
</template>
<script>
import Child from "@/components/Child";
export default {
data() {
return {
text: "父组件的值"
};
},
methods: {
dataChange(data){
this.msg = data
}
},
components: {Child}
};
</script>
父传子的实现方式就是通过props属性，子组件通过props属性接收从父组件传过来的值，而父组件传值的时候使用 v-bind 将子组件中预留的变量名绑定为data里面的数据即可；
子传父
子组件：$emit
<template>
<div id="container">
<button @click="setData">传递到父组件</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: "传递给父组件的值"
};
},
methods: {
setData() {
this.$emit("getData", this.msg);
}
}
};
</script>
父组件：
<template>
<div id="container">
<Child @getData="getData"></Child>
<p>{{msg}}</p>
</div>
</template>
<script>
import Child from "@/components/Child";
export default {
data() {
return {
msg: "父组件默认值"
};
},
methods: {
getData(data) {
this.msg = data;
}
},
components: {
Child
}
};
</script>
**子传父的实现方式就是用this.emit的第二个参数，将值作为实参传给响应自定义事件的方法，在父组件中注册子组件并在子组件标签上绑定自定义事件的监听；
非父子传值
使用中央事件总线 bus：非父子关系的两个组件之间也需要通信，在简单的场景下，可以使用一个空的Vue实例作为事件总线，原理就是把vue实例当作一个中转站。
var bus = new Vue(); //创建事件中心
组件A
// 触发组件 A 中的事件
<div @click="eve"></div>
methods: {
eve() {
bus.$emit('change','hehe'); //bus触发事件
}
}
组件B
// 在组件 B 创建的钩子中监听事件
<div></div>
created() {
bus.$on('change', () => { // bus接收事件
this.msg = 'hehe';
});
}
使用vue
vue SSR
理解 ：服务器端渲染
使用vue构建客户端应用程序时，默认情况下时在浏览器中输出vue组件，进而生成DOM和操作DOM，而使用SSR可以将同一个组件渲染为服务端的HTML字符串，然后将他们直接发送到浏览器，最后将静态标记混合为客户端上完全交互的应用程序。
如何看待一个网页是否是服务端渲染？
简单的方式就是打开开发者工具查看Network中加载的资源，如果返回的第一个文件总是document类型，这是服务器发送过来的完整HTML文档，浏览器只需要加载css/js进行视图渲染即可；
这里说的渲染，就是指生成HTML文档的过程，和之前浏览器的css+html渲染没有关系，简单来说，浏览器端渲染，指的是用js去生成HTML，列入vue，react等前端框架做的路由。 服务器端渲染，指的是用后台语言通过一些模板引擎生成HTML，列入java配合VM模板引擎，nodejs配合jade等，将数据与视图整理出完整的HTML文档发送给浏览器。
nuxt.js
简单来说，Nuxt.js 是一个基于Vue的通用应用框架，采用SSR(Server Side Rendering 服务端渲染);目的是为了解决单页面应用的 SEO 问题；vue单页面应用渲染是从服务器获取所需js，在客户端将其解析生成HTML挂载于id为app的DOM元素上，这样会存在两个大问题：
1.由于页面内容是通过js插入，对于内容性网站来说，搜索引擎无法抓取网站内容，也就是用户搜不到此网站的相关信息，不利于SEO；
2.资源请求量大，造成网站首屏加载缓慢，不利于用户体验
具体内容详见NUXT.js开发心得；
