Vue - $emit, .sync 패턴과 필요하지 않은 소품 사용

Vue - $emit, .sync 패턴과 필요하지 않은 소품 사용

필수가 아닌 소품이 있는 경우 방출이 가능합니까?$emit('update:<prop name>', value))는 자 컴포넌트에 포함되어 있으며 부모 컴포넌트가 이 값을 가지지 않고 출력된 값으로 갱신됩니다.:<prop name>.sync="<data name>"

자식 구성 요소 예:

Vue.component('child-component', {
  props: {
    bar: {
      type: String,
      default: () => 'foo'
    }
  },

  methods: {
    doSomethingWithBar () {
      this.$emit('update:bar', 'bar')
    }
  },

  template: '<button @click="doSomethingWithBar">{{ bar }}</button>'
})

예: 부모:

<child-component /> <!-- notice no :bar.sync -->

코드펜의 예: https://codepen.io/anon/pen/jXaGJg

현재 솔루션은 다음과 같습니다.

Vue.component('child-component', {
  props: {
    bar: {
      type: String,
      default: () => 'foo'
    }
  },

  data () {
    return {
      innerBar: null
    }    
  },

  mounted () {
    this.innerBar = this.bar
  },

  methods: {
    doSomethingWithBar () {
      this.innerBar = 'bar'
    }
  },

  template: '<button @click="doSomethingWithBar">{{ bar }}</button>',

  watch: {
    bar () {
      this.innerBar = this.bar
    },

    innerBar () {
      if (this.innerBar !== this.bar) {
        this.$emit('update:bar', this.innerBar)
      }
    }
  }
})

하지만 이것은 많은 불필요한 코드를 필요로 하고 나는 더 나은 아이디어가 있다고 확신한다.

업데이트: (실제 컨텍스트)

저는 컨트롤을 감싸고 오디오를 재생하는 오디오 컴포넌트를 디자인하고 있습니다.

의 예audio.loop(current Time, paused, volume 등과 유사한 작업을 수행해야 합니다).

export default {
  props: {
    loop: {
      type: Boolean,
      default: () => false
    },
    audio: {
      required: true,
      type: HTMLAudioElement
    },
  },

  data () {
    return {
      innerLoop: null
    }
  },

  methods: {
    toggleLoop () {
      if (this.innerLoop) {
        this.innerLoop = false
      } else {
         this.innerLoop = true
      }
    }
  },

  watch: {
    loop () {
      this.innerLoop = this.loop
    },

    innerLoop () {
      this.audio.loop = this.innerLoop
      if (this.innerLoop !== this.loop) {
        this.$emit('update:loop', this.innerLoop)
      }
    }
  }
}

이게 효과가 있는데 더 좋은 방법이 있을까요?

언급URL : https://stackoverflow.com/questions/53986535/vue-using-emit-sync-pattern-with-not-required-props