Vue 实际项目的总结与学习

[shaobeichen]

1. 如何修改props？

背景：一个自定义弹窗组件，需要显示隐藏，同步给父组件，但是如果修改传入的props，那么就会报错。
解决：父组件调用子组件时使用v-model，子组件同步给父组件时，用 this.$emit('input', false) ，input是固定值，后面的参数是想修改v-model的值。

// 父组件
<modal v-model="show" />
// 子组件
<template>
  <div>
    <div v-if="show">内容</div>
    <div @click="close">关闭</div>
  </div>
</template>
<script>
export default {
  props: {
    /**
     * 是否显示弹窗（v-modal）
     */
    value: {
      type: Boolean,
      require: false
    }
  },
  data () {
    return {
      show: this.value
    }
  },
 watch: {
    value (newVal) {
      this.show = newVal
    }
  },
 methods: {
    close () {
      this.$emit('input', false)
    }
  }
}
</script>

2. /deep/ 失效怎么处理？

解决：

1. 尝试/deep/前加上父class
2. 尝试使用::v-deep
3. /deep/通常在sass或less中使用，>>>通常在原生css中使用

3. 自定义按钮click事件失效怎么处理？如果不想用native呢？

解决：可以使用@click.native使其触发原生按钮事件。如果不想使用native，可以在子组件中定义click

// 子组件
<template>
  <button @click="_click">
    <slot></slot>
  </button>
</template>

<script type="text/babel">
export default{
    ....
    ....
    methods: {
      _click: function () {
        this.$emit('click')
      }
    }
}
</script>