Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vue 实际项目的总结与学习 #29

Open
shaobeichen opened this issue Jan 28, 2021 · 0 comments
Open

Vue 实际项目的总结与学习 #29

shaobeichen opened this issue Jan 28, 2021 · 0 comments

Comments

@shaobeichen
Copy link
Owner

shaobeichen commented Jan 28, 2021

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>

@shaobeichen shaobeichen changed the title Vue 实际项目的坑总结与学习 Vue 实际项目的总结与学习 Feb 25, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant