vue refs のプロパティの変更

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

1. Vue Refs の概要

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

1. 文字列形式:

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

2. 関数形式:

   <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 の属性を変更する

1. DOM 要素の属性を変更する

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

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

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

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

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

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 メソッドを呼び出して親コンポーネントに変更を通知することをお勧めします。

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

コンポーネントのプロパティを変更できることに加えて、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 サイトの他の関連記事を参照してください。