vue 구성 요소에서 속성 감시

vue 구성 요소에서 속성 감시

부모 컴포넌트에 비동기 조작이 있어 이 조작이 완료되었음을 자녀에게 통지해야 합니다.아이의 재산변경을 지켜볼 수 있을까요?어느 정도:

new Vue({
   props:['parentReady'],
   watch:{
     parentReady(val){
       alert('parentReady prop was changed');
     }
  }
})

몇 가지 방법이 있습니다.비동기 작업이 완료되면 상위 항목에 속성을 설정할 수 있습니다.

console.clear()

Vue.component("child", {
  props: ["parentLoading"],
  template: `
    <h1 v-if="isParentLoading">Parent is loading...</h1>
    <h1 v-else>Parent loading complete!</h1>
  `,
  computed: {
    isParentLoading() {
      return this.parentLoading
    }
  }
})

new Vue({
  el: "#app",
  data: {
    loading: true
  },
  mounted() {
    setTimeout(() => this.loading = false, 2000)
  }
})

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
  <child :parent-loading="loading"></child>
</div>

그 아이한테 메서드를 호출할 수도 있어요.

console.clear()

Vue.component("child",{
  template:`
    <h1 v-if="!loaded">Parent is loading...</h1>
    <h1 v-else>Parent loading complete!</h1>
  `,
  data(){
    return {
      loaded: false
    }
  },
  methods:{
    onLoaded(){
      this.loaded = true
    }
  }
})

new Vue({
  el:"#app",
  mounted(){
    setTimeout(() => this.$refs.child.onLoaded(), 2000)
  }
})

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
  <child ref="child"></child>
</div>

그냥 그 건물을 지켜봐도 돼

console.clear()

Vue.component("child", {
  props: ["parentLoading"],
  template: `
    <h1 v-if="parentLoading">Parent is loading...</h1>
    <h1 v-else>Parent loading complete!</h1>
  `,
  watch: {
    parentLoading(newVal) {
      return newVal
    }
  }
})

new Vue({
  el: "#app",
  data: {
    loading: true
  },
  mounted() {
    setTimeout(() => this.loading = false, 2000)
  }
})

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
  <child :parent-loading="loading"></child>
</div>

언급URL : https://stackoverflow.com/questions/45339249/watch-for-a-property-in-vue-component