vue refs のプロパティの変更-フロントエンドQ&A-php.cn

vue refs のプロパティの変更

WBOY

リリース： 2023-05-11 10:04:36

オリジナル

1701 人が閲覧しました

Vue はユーザーインターフェイスを構築するための進歩的なフレームワークであり、シンプル、柔軟、効率的であり、フロントエンド開発で広く使用されています。中でも refs は Vue が提供する重要な機能であり、開発者が DOM 要素やコンポーネントインスタンスに直接アクセスして、プロパティを変更したりメソッドを呼び出したりできるようになります。この記事では、読者がこの重要な機能をよりよく習得できるように、Vue ref のプロパティを変更する関連テクニックを検討します。

1. Vue Refs の概要

Vue では、refs はコンポーネントまたは DOM 要素にアクセスするために使用される特別な属性です。記述方法は 2 つあります。

文字列形式:

<template>
  <div ref="myRef"></div>
</template>

ログイン後にコピー

関数形式:
```
<template>
  <div ref="myRef"></div>
</template>

<script>
export default {
  methods: {
 log() {
   console.log(this.$refs.myRef);
 }
  }
}
</script>
```
ログイン後にコピー
refs は次の目的で使用できます。コンポーネントインスタンス、DOM 要素、またはサブコンポーネントにアクセスする場合、その方法は通常、テンプレート内で宣言し、コンポーネントの JavaScript コード内の this.$refs を通じてアクセスします。 ref はコンポーネントがレンダリングされた後にのみ設定できるため、マウントされたライフサイクル関数で使用することをお勧めします。

2. Vue Refs の属性を変更する

DOM 要素の属性を変更する

DOM 要素の属性を直接変更できます。たとえば、 refs を介して DOM 要素を使用すると、テキストボックスのプレースホルダーを変更できます。

<template>
  <div>
    <input type="text" ref="myInput">
  </div>
</template>

<script>
  export default {
    mounted() {
      this.$refs.myInput.placeholder = '请输入用户名';
    }
  }
</script>

ログイン後にコピー

コンポーネントのレンダリングが完了すると、マウントされたライフサイクル関数が呼び出され、この関数で refs を使用して、 DOM 要素の属性。

コンポーネント属性の変更

refs を使用してコンポーネントの属性を変更することもでき、コンポーネントの JavaScript コードで、これを通じてコンポーネントインスタンスを取得します。 $refs を参照すると、変更できます。コンポーネントは、属性の追加、削除、変更、チェックなどの操作を実行します。

<template>
  <div>
    <my-component ref="myComp"></my-component>
    <button @click="changeText">点击修改</button>
  </div>
</template>

<script>
  import MyComponent from './MyComponent.vue'
  export default {
    components: {MyComponent},
    methods: {
      changeText() {
        this.$refs.myComp.text = '新的文本内容';
      }
    }
  }
</script>

ログイン後にコピー

上の例では、ボタンのクリックイベントを通じて、changeText メソッドを呼び出します。次に、refs を使用してコンポーネントインスタンスを取得し、コンポーネントのテキスト属性を変更します。

コンポーネントのプロパティを変更する場合は、プロパティが変更可能であること、つまりプロパティが読み取り専用でないこと (props など) を確認する必要があることに注意してください。 props のプロパティを変更する場合は、$emit メソッドを呼び出して親コンポーネントに変更を通知することをお勧めします。

コンポーネントメソッドの呼び出し

コンポーネントのプロパティを変更できることに加えて、ref を使用してコンポーネントメソッドを呼び出すこともできます。コンポーネントの JavaScript コードでは、$refs を通じてコンポーネントインスタンスを取得し、コンポーネントのメソッドを呼び出すことができます:

<template>
  <div>
    <my-component ref="myComp"></my-component>
    <button @click="callMyMethod">调用组件方法</button>
  </div>
</template>

<script>
  import MyComponent from './MyComponent.vue'
  export default {
    components: {MyComponent},
    methods: {
      callMyMethod() {
        this.$refs.myComp.myMethod();
      }
    }
  }
</script>

ログイン後にコピー

上の例では、my-component コンポーネントの myMethod メソッドを呼び出しました。メソッドがパブリックであること、つまりコンポーネントのメソッドで定義されていることを確認してください。

コンポーネントメソッドの呼び出しは、refs を通じてだけでなく、イベントや $emit などを通じても実現できることに注意してください。ただし、refs を使用してメソッドを呼び出すことには、直接性と単純さという利点があり、コードの可読性と保守性を向上させることができます。

3. 概要

Vue Refs によるプロパティの変更は、Vue フレームワークの重要な機能の 1 つであり、コンポーネントインスタンス、DOM 要素、またはサブコンポーネントにアクセスしたり、プロパティを変更したり、メソッドを呼び出したりするために使用できます。、など。 Vue Ref を適用してプロパティを変更する場合は、読みやすさ、単純さ、変更されるプロパティの種類、呼び出されるメソッドなどの詳細に注意する必要があります。この記事の説明を通じて、読者は Vue Ref のプロパティを変更するスキルをよりよく習得し、Vue アプリケーションの開発を最適化できると思います。

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