詳細な回答: Vue の変更はコンポーネントにどのような影響を与えますか?

この記事では主に、Vue のプロパティ、データ、計算された変更がコンポーネントの更新に与える影響について紹介し、参考にしていきます。

この記事では、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>

rree

1. 親コンポーネントが props を変更する場合。 、子コンポーネントが props を直接使用する場合、サブコンポーネントの更新がトリガーされます

2. 親コンポーネントは props を変更します。サブコンポーネントが props を使用する前にデータに配置する場合、サブコンポーネントの更新はトリガーされません

3. 。サブコンポーネントが props を使用する前に computed に置いた場合、サブコンポーネントの更新はトリガーされません

4. data、props、computed の変更はコンポーネントの更新をトリガーします

。以上は皆さんのためにまとめたものですので、今後皆さんのお役に立てれば幸いです。

関連記事:

cheerioを使用してNode.jsでシンプルなWebクローラーを作成する(詳細なチュートリアル)

vueで複数のデータを子コンポーネントに渡す親コンポーネントを実装する方法

Reactでの使用方法ネイティブはカスタムのプルダウン更新とプルアップロードリストを実装していますか

vueでjqgridコンポーネントのURLアドレスを動的に変更できない問題を解決する方法

淘宝網のような星評価を達成する方法vue内

以上が詳細な回答: Vue の変更はコンポーネントにどのような影響を与えますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。