vue 親コンポーネントは子コンポーネントのプロパティを変更します

Vue では、親コンポーネントと子コンポーネント間のデータ通信は非常に一般的な要件です。親コンポーネントは props を通じて子コンポーネントにデータを渡すことができ、子コンポーネントはイベントを通じて親コンポーネントに変更を上向きに通知できます。ただし、場合によっては、親コンポーネント内の子コンポーネントの一部のプロパティを変更する必要があり、これには $refs を使用して子コンポーネントを操作する必要があります。

Vue では、$refs は、親コンポーネント内の子コンポーネント内の変数またはメソッドにアクセスできる参照です。 $refs を通じて、サブコンポーネントのインスタンスを取得し、そのメソッドを呼び出したり、そのプロパティを変更したりできます。

以下では、例を使用して、親コンポーネントを通じて子コンポーネントのプロパティを変更する方法を確認します。

まず、属性名を持つサブコンポーネントを定義し、属性の値を設定するメソッド setName を提供する必要があります。

<template>
  <div>
    <p>子组件的name属性为：{{ name }}</p>
  </div>
</template>

<script>
export default {
  name: 'Subcomponent',
  props: {
    name: {
      type: String,
      default: ''
    }
  },
  methods: {
    setName(value) {
      this.name = value;
    }
  }
}
</script>

次に、親コンポーネントに子コンポーネントを導入し、テンプレートで子コンポーネントを使用します。また、親コンポーネント内の子コンポーネント インスタンスを参照するには、子コンポーネント タグに ref 属性を設定する必要があります。

<template>
  <div>
    <button @click="changeName">更改子组件name属性值</button>
    <subcomponent ref="mySubcomponent" :name="name"></subcomponent>
  </div>
</template>

<script>
import Subcomponent from './Subcomponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    Subcomponent
  },
  data() {
    return {
      name: 'Vue.js'
    }
  },
  methods: {
    changeName() {
      this.$refs.mySubcomponent.setName('React');
    }
  }
}
</script>

親コンポーネントでは、メソッドchangeNameを定義します。このメソッドは、$refsを通じてサブコンポーネントのインスタンスを取得し、そのsetNameメソッドを呼び出して、サブコンポーネントのname属性をReactに変更します。このようにして、ボタンをクリックすると、サブコンポーネントの name 属性が変更されたことがページ上で確認できます。

実際のプロジェクト開発プロセスでは、親コンポーネントを通じて子コンポーネントの一部のプロパティを変更する必要があることがよくあります。現時点では、$refs は私たちにとって非常に重要なツールになります。サブコンポーネントが特定のイベントに応答する必要がある場合、イベントを使用してこれを実現できます。次に、小さな例を使用して、親コンポーネントが子コンポーネントのプロパティを変更するメカニズムをさらに理解してみましょう。

<template>
  <div>
    <button @click="changeName">更改子组件name属性值</button>
    <subcomponent ref="mySubcomponent" :name="name" @changeName="handleChangeName"></subcomponent>
  </div>
</template>

<script>
import Subcomponent from './Subcomponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    Subcomponent
  },
  data() {
    return {
      name: 'Vue.js'
    }
  },
  methods: {
    changeName() {
      this.$refs.mySubcomponent.setName('React');
    },
    handleChangeName(newName) {
      this.name = newName;
    }
  }
}
</script>

この例では、子コンポーネント タグに @changeName イベント リスナーを追加し、イベントに応答するために親コンポーネントに handleChangeName メソッドを定義します。 $emit('changeName', newName) が子コンポーネントで呼び出されると、親コンポーネントの handleChangeName メソッドが呼び出され、渡された新しい名前が name 属性に割り当てられます。このようにして、サブコンポーネントの name 属性値の変化をページ上でリアルタイムに確認することもできます。

一般に、Vue では、$refs を通じてサブコンポーネントのインスタンスを取得し、そのプロパティを変更したり、そのメソッドを呼び出したりすると非常に便利です。イベントを一緒に使用すると、子コンポーネントのプロパティを変更する親コンポーネントの機能を実現でき、ページ操作にさらに多くの可能性をもたらします。

以上がvue 親コンポーネントは子コンポーネントのプロパティを変更しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。