Vue での ref の使用法とデモンストレーション

<テンプレート>

  <div>

      私は{

{名前}}

  </div>

</テンプレート>

<スクリプト>

エクスポートデフォルト{  

    名前:'Cpn1',

    データ（） {

        戻る {

            名前:'コンポーネント 1'

        }

    },

}

</スクリプト>

<テンプレート>

  <div>私は{

{名前} </div>

</テンプレート>

<スクリプト>

エクスポートデフォルト{ 

    名前:'Cpn2',

    データ（） {

        戻る { 

            名前:'コンポーネント 2'

        }

    },

}

</スクリプト>

<テンプレート>

  <div id="アプリ">

    <cpn-1 ref="c1"></cpn-1>

    <cpn-2 ref="c2"></cpn-2>

    <button @click="showDom">ボタン</button>

    <h2 ref="title">私はタイトルです</h2>

    <input type="text" ref="input" 値="123">

  </div>

</テンプレート>

<スクリプト>

「./components/Cpn1.vue」からCpn1をインポートします。

「./components/Cpn2.vue」からCpn2をインポートします。

エクスポートデフォルト{ 

  コンポーネント:

    Cpn1、Cpn2 },

  名前:「アプリ」、

  メソッド: { 

    表示Dom() { 

      コンソールにログ出力します。

      console.log(this.$refs.c2.$data.name);

      console.log(this.$refs.title)

      console.log(this.$refs.input.value)

      // 実際の DOM オブジェクトを取得して値を変更します var title = this.$refs.title;

      title.innerText="helloWord"

    },

  },

};

</スクリプト>