자세한 답변: Vue의 변경 사항이 구성 요소에 어떤 영향을 미치나요?

이 글은 주로 Vue의 props, 데이터 및 계산된 변경 사항이 구성 요소 업데이트에 미치는 영향을 소개합니다. 이제 이를 공유하고 참조할 수 있습니다.

이 기사에서는 vue의 props, 데이터 및 계산된 변경 사항이 구성 요소 업데이트에 미치는 영향을 소개합니다. 더 이상 고민하지 말고 바로 코드로 넘어가겠습니다.

/** this is Parent.vue */
<template>
 <p>
  <p>{{&#39;parent data : &#39; + parentData}}</p>
  <p>{{&#39;parent to children1 props : &#39; + parentToChildren1Props}}</p>
  <p>{{&#39;parent to children2 props : &#39; + parentToChildren2Props}}</p>
  <p>
   <el-button @click="changeParentData">change parent data</el-button>
   <el-button @click="changeParentToChildren1Props">change parent to children1 data</el-button>
   <el-button @click="changeParentToChildren2Props">change parent to children2 data</el-button>
  </p>
  <my-children1 :children1Props="parentToChildren1Props" @changeParentToChildren1Props="changeParentToChildren1Props"></my-children1>
  <my-children2 :children2Props="parentToChildren2Props" @changeParentToChildren2Props="changeParentToChildren2Props"></my-children2>
 </p>
</template>

<script>
 import Children1 from &#39;./Children1&#39;;
 import Children2 from &#39;./Children2&#39;;
 export default{
  name: &#39;parent&#39;,
  data() {
   return {
    parentData: &#39;ParentData&#39;,
    parentToChildren1Props: &#39;ParentToChildren1Props&#39;,
    parentToChildren2Props: &#39;ParentToChildren2Props&#39;
   }

  },

  beforeCreate: function() {
   console.log(&#39;*******this is parent beforeCreate*********&#39;);

  },

  created: function() {
   console.log(&#39;######this is parent created######&#39;);

  },

  beforeMount: function() {
   console.log(&#39;------this is parent beforeMount------&#39;);

  },

  mounted: function() {
   console.log(&#39;++++++this is parent mounted++++++++&#39;);

  },

  beforeUpdate: function() {
   console.log(&#39;&&&&&&&&this is parent beforeUpdate&&&&&&&&&#39;);

  },

  updated: function() {
   console.log(&#39;$$$$$$$this is parent updated$$$$$$$$&#39;);

  },

  methods: {
   changeParentData: function() {
    this.parentData = &#39;changeParentData&#39;

   },

   changeParentToChildren1Props: function() {
    this.parentToChildren1Props = &#39;changeParentToChildren1Props&#39;

   },

   changeParentToChildren2Props: function() {
    this.parentToChildren2Props = &#39;changeParentToChildren2Props&#39;

   }

  },
  components: {
   &#39;my-children1&#39;: Children1,
   &#39;my-children2&#39;: Children2
  }
 }
</script>

/** this is Children1.vue */
<template>
 <p>
  <p>{{&#39;children1 data : &#39; + children1Data}}</p>
  <p>{{&#39;parent to children1 props : &#39; + children1Props}}</p>
  <p>{{&#39;parent to children1 props to data : &#39; + children1PropsData}}</p>
  <p>
   <el-button @click.native="changeChildren1Data">change children1 data</el-button>
   <el-button @click.native="emitParentToChangeChildren1Props">emit parent to change children1 props</el-button>
  </p>
 </p>
</template>

<script>
 export default {
  name: &#39;children1&#39;,
  props: [&#39;children1Props&#39;],
  data() {
   return {
    children1Data: &#39;Children1Data&#39;
   }
  },

  computed: {
   children1PropsData: function() {
    return this.children1Props
   }
  },

  beforeCreate: function() {
   console.log(&#39;*******this is children1 beforeCreate*********&#39;);

  },

  created: function() {

   console.log(&#39;######this is children1 created######&#39;);
  },

  beforeMount: function() {
   console.log(&#39;------this is children1 beforeMount------&#39;);

  },

  mounted: function() {
   console.log(&#39;++++++this is children1 mounted++++++++&#39;);

  },

  beforeUpdate: function() {
   console.log(&#39;&&&&&&&&this is children1 beforeUpdate&&&&&&&&&#39;);

  },

  updated: function() {
   console.log(&#39;$$$$$$$this is children1 updated$$$$$$$$&#39;);

  },

  methods: {
   changeChildren1Data: function() {
    this.children1Data = &#39;changeChildren1Data&#39;

   },

   emitParentToChangeChildren1Props: function() {
    console.log(&#39;emitParentToChangeChildren1Props&#39;);
    this.$emit(&#39;changeParentToChildren1Props&#39;);
   }
  }
 }
</script>

/** this is Children2.vue */
<template>
 <p>
  <p>{{&#39;children2 data : &#39; + children2Data}}</p>
  <p>{{&#39;parent to children2 props : &#39; + children2Props}}</p>
  <p>{{&#39;parent to children2 props to data : &#39; + children2PropsData}}</p>
  <p>
   <el-button @click.native="changeChildren2Data">change children2 data</el-button>
   <el-button @click.native="emitParentToChangeChildren2Props">emit parent to change children2 props</el-button>
  </p>
 </p>
</template>

<script>
 export default {
  name: &#39;children2&#39;,
  props: [&#39;children2Props&#39;],
  data() {
   return {
    children2Data: &#39;Children2Data&#39;,
    children2PropsData: this.children2Props
   }
  },

  beforeCreate: function() {
   console.log(&#39;*******this is children2 beforeCreate*********&#39;);

  },

  created: function() {
   console.log(&#39;######this is children2 created######&#39;);

  },

  beforeMount: function() {
   console.log(&#39;------this is children2 beforeMount------&#39;);

  },

  mounted: function() {
   console.log(&#39;++++++this is children2 mounted++++++++&#39;);

  },

  beforeUpdate: function() {
   console.log(&#39;&&&&&&&&this is children2 beforeUpdate&&&&&&&&&#39;);

  },
  updated: function() {
   console.log(&#39;$$$$$$$this is children2 updated$$$$$$$$&#39;);

  },

  methods: {
   changeChildren2Data: function() {
    this.children2Data = &#39;changeChildren2Data&#39;
   },

   emitParentToChangeChildren2Props: function() {
    this.$emit(&#39;changeParentToChildren2Props&#39;);
   }
  }
 }
</script>

1. , 하위 구성 요소가 props를 직접 사용하는 경우 하위 구성 요소 업데이트가 트리거됩니다

2. 상위 구성 요소가 props를 변경합니다. 하위 구성 요소가 사용하기 전에 데이터에 prop을 넣으면 하위 구성 요소 업데이트가 트리거되지 않습니다

3. 상위 구성 요소 하위 구성 요소를 사용하기 전에 계산에 소품을 넣으면 하위 구성 요소 업데이트가 트리거되지 않습니다. , 하위 구성 요소 업데이트가 트리거됩니다

4. 데이터, 소품 및 계산이 변경되면 구성 요소 업데이트가 트리거됩니다

위 내용은 제가 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

cherio를 사용하여 Node.js에서 간단한 웹 크롤러 만들기(자세한 튜토리얼)

vue에서 여러 데이터를 하위 구성 요소에 전달하기 위해 상위 구성 요소를 구현하는 방법

React에서 사용되는 방법 네이티브는 사용자 정의 풀다운 새로 고침 및 풀업 로드 목록을 구현합니다

vue에서 jqgrid 구성 요소의 URL 주소를 동적으로 수정할 수 없는 문제를 해결하는 방법

Taobao와 같은 별점을 얻는 방법 vue

위 내용은 자세한 답변: Vue의 변경 사항이 구성 요소에 어떤 영향을 미치나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!