实战笔记—踩坑笔记：Vue的WEB开发

+ 父子组件传值的问题

出现的问题： 父组件给子组件（表格）异步传对象时，发现子组件第一次渲染后（数据为空），界面仍然没有发生变化，没有数据显示。

• 原因：父组件给子组件传值，传的是“引用“， 也就是说，如果只是对对象赋值，其实引用仍然不变，而传字符串/数字等会改变。
• 解决：采用watch 监听对象

+ computed传参的问题

出现的问题：在一些情况，例如联动的table，需要用到间接计算的时候，又需要带参数的时候，虽然computed可以实现，但是一般不这么用，

• 原因：
  – 1. Vue的开发人员对每个属性的用法都是有推荐使用的
  – 2. computed: {value() {}}， 这里的value其实也是一个变量，如果表单每一行都用了computed，就相当于给每一行都增加了一个变量，太浪费了，而如果用method，就相当于给prototype添加了一个方法。

• 解决：放在method，或者用this.data里的变量间接代替。

+ A -> B -> C 组件传值的方法【$attrs与$listeners、$props】

作者：雨夜望月
链接：https://segmentfault.com/a/1190000020637062
来源：SegmentFault 思否
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

】

出现的原因： 可能会出现A给B传值，B又需要给C传props，可用的形式包括vuex、粗糙地直接传props方法等
或者有一些事件，例如A -> B 绑定点击事件，是响应不了的，可以采用“.native”事件，但有时候也是有bug（可看官网的说明，下面链接）

• 解决：可以用使用“$attrs”与“$listeners”实现多层嵌套传递。利用“$listeners”，可以实现A调用B就像是input组件一样，能够监听各个事件

  • 参考文献：【官网】
  • 参考文献：【别人的博客】

• 学习点：在高级的组件中可以尝试使用这三个特性

  • 参考链接：【Vue使用$attrs与$listeners实现多层嵌套传递】
  • 参考链接：【props、属性、事件传递: v-bind="、attrs"、v-on="$listeners"】
  • 参考链接：【Vue 父子组件数据传递( inheritAttrs + $attrs + $listeners)】

+ 深入理解.sync修饰符【组件需要绑定多个v-model时】

参考链接：https://segmentfault.com/a/1190000018899851

出现的问题：一个组件上只能定义一个v-model，如果其他prop也要实现双向绑定的效果该怎么办呢？ 简单的方法是子组件向父组件发送一个事件，父组件监听该事件，然后更新prop。

+ 组件的注册【全局/局部】

• 全局注册
  用 Vue.component 来创建组件，都是全局组件，

Vue.component('my-component-name', {
  // ... 选项 ...
})

这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。比如：

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

new Vue({ el: '#app' })

<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>

• 局部注册

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

然后在 components 选项中定义你想要使用的组件：

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})