1. 技巧

通过字符串获取到值的地址，然后改那个值（中级前端）

let regex = /\[(\d+)\]/g
key = key.replace(regex, (match, number)=> `.${number}`)
let keys = key.split('.')
for(let i=0;i<keys.length;i++){
  if(i === keys.length -1){
    result[keys[i]] = value
  }else{
    result = result[keys[i]]
  }
  //result = this.resume
  //keys = ['skills', '0', 'name']
  //i=0 result === result['skills'] === this.resume.skills
  //i=1 result === result['0'] === this.resume.skills.0
  //i=2 result === result['name'] === this.resume.skills.0.name
  //result === this.resume['skills']['0']['name']
}

2. 组件通信（面试）

父子通信

子传给父$emit
组件不能控制自己出现或隐藏，必须由它的父亲控制，所以组件要通过事件（$emit）通知它的父亲。
事件在子组件的template里直接写$emit
```
<button @click="$emit('close')">关闭</button>
```
但在methods里，需要写this.$emit，如下
```
methods:{
  onClick(){
    this.$emit('close')
  }
}
```
在组件里写好后，在html文件里监听
```
<xxx @close="visible = false"></xxx>
```
父传给子 porps
<share :sharelink="shareLink"></share>将app.js里的data{shareLink: ...}，传给子组件里的props:['sharelink']

爷孙通信
只能用两个父子通信，将孙子的组件写在儿子组件的template里，然后孙子$emit('close')传给儿子，儿子@close="$emit('close')"传给爷爷

3. 兄弟通信

let Hub = new Vue(); //创建事件中心
//组件1触发：

<div @click="eve"></div>
methods: {
  eve() {
    Hub.$emit('change','hehe'); //Hub触发事件
  }
}

//组件2接收:

<div></div>
created() {
  Hub.$on('change', () => { //Hub接收事件
    this.msg = 'hehe';
  });
}

2. 大小写

子组件的props里的属性不能是大写！因为html里的属性只能用小写，如下

<xxx :playresume="playResume"></xxx>

所以组件里也只能小写

props: ['playresume']

3. 组件化

把代码里每一大块都写成一个vue组件，像...（举例），组件需要的参数通过父组件传进去(props)，组件需要触发的事件，通过$emit传给父组件，父组件监听并完成事件

4. 前端路由

路由就是根据不同的url路径展示不容的ui，可以用jquery实现，也可以用vue，这样可以实现单页面应用

vue-router
若能控制后端代码就能用history模式，点击后改变url。
若不能控制后端，则不要用history，只改变锚点
写了路由之后就由单页面变成还是单页面但是加路由

<html>
  <div class="page" id="root">
    <router-view></router-view>
  </div>
</html>

<script src=app.js></script>
<script src=login.js></script>
<script src=signUp.js></script>
<script src=root.js>
  const routes = [
    { path: '/', component: window.App },
    { path: '/login', component: window.Login},
    { path: '/signUp', component: window.SignUp},
  ]

  const router = new VueRouter({
    routes: routes // (缩写) 相当于 routes: routes
  })

  const root = new Vue({
    router: router,
    data(){
        return{
            currentUser: {}
        }
    }
  }).$mount('#root')
</script>

最后编辑于：2018.06.03 14:50:50

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

2018-05-27 vue-resume项目笔记