ホームページ > ウェブフロントエンド > jsチュートリアル > vue2 での ref ステップの使用の詳細な説明

vue2 での ref ステップの使用の詳細な説明

php中世界最好的语言
リリース: 2018-04-16 14:04:39
オリジナル
1590 人が閲覧しました

今回はvue2でrefを使用する手順を詳しく説明します。vue2でrefを使用する際の注意点を実際に見てみましょう。

この記事ではvue2におけるrefの具体的な使い方を紹介し、皆さんに共有します。詳細は以下の通りです。

1. まず 2 つのコンポーネントを定義しましょう

HTML 部分

rreee

jsパート

rreee

ここでnavbarのナビゲーションとpagefooterのフッター値に直接アクセスするにはどうすればよいですか?ここで ref が使用されます

2. 参照の使用

コンポーネントを変更する

  <p id="app">
   <navbar ></navbar>
   <pagefooter ></pagefooter>
  </p>
ログイン後にコピー

普通のラベルに使うだけなら

  Vue.component('navbar',{
    template:'<p>{{navs}}</p>',
    data:function () {
     return {
      navs:1
     }
    }
   });
  Vue.component('pagefooter',{
    template:'<p>{{footer}}</p>',
    data:function () {
     return {
      footer:11
     }
    }
   });
ログイン後にコピー

彼の役割と:

rreee

効果は同じです

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:



以上がvue2 での ref ステップの使用の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート