vue の $refs とはどういう意味ですか?-フロントエンドQ&A-php.cn

vue では、$refs は、ref 属性で登録されたすべての DOM 要素とコンポーネントインスタンスを保持するオブジェクトです。 ref は要素またはサブコンポーネントの参照情報を登録するために使用されます。参照情報は親コンポーネントの "$refs" オブジェクトに登録されます。通常の DOM 要素で使用された場合、参照は DOM 要素を指します。サブコンポーネントでは、参照はコンポーネントインスタンスを指します。

vue の $refs とはどういう意味ですか?

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。 Vue の

$refs

$refs は、ref 属性で登録されたすべての DOM 要素とコンポーネントインスタンスを保持するオブジェクトです。

説明

ref は、要素またはサブコンポーネントの参照情報を登録するために使用されます。参照情報は、親コンポーネント # の $refs オブジェクトに登録されます

vuejs ビデオチュートリアル

、Web フロントエンド開発 ]

<!DOCTYPE html>
<html>
<head>
    <title>Vue</title>
</head>
<body>
    <div id="app">
        <div ref="node">Node</div>
        <layout-div ref="layout"></layout-div>
        <div v-for="i in 3" :key="i" ref="nodearr">{{i}}</div>
    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script type="text/javascript">
    Vue.component("layout-div", {
      data: function(){
          return {
            count: 0
          }
      },
      template: `<div>
                    <div>{{count}}</div>
                </div>`
    })
 
    var vm = new Vue({
        el: &#39;#app&#39;,
        mounted: function(){
            console.log(this.$refs.node); // <div>Node</div> // DOM元素
            console.log(this.$refs.layout); // VueComponent {_uid: 1, ...} // 组件实例
            console.log(this.$refs.nodearr); // (3) [div, div, div] // DOM元素数组
        }
    })
</script>
</html>

ログイン後にコピー

ref 自体はレンダリング結果として作成されるため、実行中にアクセスすることはできません。初期レンダリング。これはまだ存在せず、$refs は応答しないため、テンプレートのデータバインディングに使用しないでください。ref へのアクセスを初期化するときは、そのライフサイクルのマウントされたメソッドでそれを呼び出す必要があります。データの更新後、$nextTick メソッドでコールバック操作を渡して要素またはインスタンスを取得する必要があります。また、DOM 要素を直接操作することは一般的に推奨されません。データバインディングを使用して、MVVM の ViewModel で DOM を操作できるようにしてください。。

<!DOCTYPE html>
<html>
<head>
    <title>Vue</title>
</head>
<body>
    <div id="app"></div>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script type="text/javascript">
 
    var vm = new Vue({
        el: &#39;#app&#39;,
        data: function(){
            return {
                msg: 0
            }
        },
        template:  `<div>
                       <div ref="node">{{msg}}</div>
                       <button @click="updateMsg">button</button>
                    </div>`,
        beforeMount: function(){
            console.log(this.$refs.node); // undefined
        },
        mounted: function(){
            console.log(this.$refs.node); // <div>0</div>
        },
        methods: {
            updateMsg: function(){
                this.msg = 1;
                console.log(this.$refs.node.innerHTML); // 0
                this.$nextTick(() => {
                    console.log(this.$refs.node.innerHTML); // 1
                })
            }
        }
    })
</script>
</html>

ログイン後にコピー

VUE での $refs の基本的な使用法

ref には 3 つの使用法があります:

1 , 通常の要素に ref を追加します。

this.$refs. (ref 値)

取得したのは dom 要素です 2. サブコンポーネントに ref を追加します。

this.$refs.(ref値)

取得されるのは、コンポーネントのインスタンスであり、コンポーネントのすべてのメソッドが利用可能です。メソッドを使用する場合は、this.$refs.(ref value).method() として直接使用できます。 # 3. v-for と ref を使用して配列または dom ノードのセットを取得する方法注意すべき点:

1. v-for トラバーサルを通じて別の ref を追加したい場合は、

:

、つまり

:ref = 変数 # を追加することを忘れないでください。 ##; 他の属性と同様、固定値の場合は ##: を付ける必要はありませんが、変数の場合は、忘れずに :
を追加してください。 (コロンが追加されている場合は、その後に変数または式が続くことを意味します。コロンがない場合は、対応する文字列定数 (String) を意味します。) 2. : を渡します。 ref = 変数 ref を追加します (つまり、

を追加します)。ref を取得したい場合は、を追加する必要があります。 [0] (例: this.$refs[refsArrayItem] [0]; でない場合: ref = 変数ただし、 ref = 特定の文字列である場合は、this.$refs[refsArrayItem] のように追加する必要はありません。 1、Make make を使用する場合、DOM のレンダリングが完了した後、ref は

である必要があります。ドムがレンダリングされました。たとえば、ライフサイクル

mounted(){} フックで

を呼び出すか、this.$nextTick(()=>{} で call ## を呼び出します。 ) #。 2. ref がループアウトされ、 に複数の重複した名前がある場合、ref の値は配列 になります。このとき、単一の参照をループするだけです。

例 1:

ref 属性の追加

<div id="app">
    <h1 ref="h1Ele">这是H1</h1>
    <hello ref="ho"></hello>
 
    <button @click="getref">获取H1元素</button>
</div>

ログイン後にコピー

ref に登録されているすべてのコンポーネントまたは要素を取得

methods: {
        getref() {
          // 表示从 $refs对象 中, 获取 ref 属性值为: h1ele DOM元素或组件
           console.log(this.$refs.h1Ele.innerText);
           this.$refs.h1ele.style.color = &#39;red&#39;;// 修改html样式
 
          console.log(this.$refs.ho.msg);// 获取组件数据
          console.log(this.$refs.ho.test);// 获取组件的方法
        }
      }

ログイン後にコピー

例2:

Vue コード:

 <!-- 列表部分 -->
                <el-table @sort-change="sortChange" ref="multipleSelection" border :data="valueDryGoodTableData" style="width: 100%">
                    <el-table-column align="left" prop="title" label="标题" min-width="80%" sortable="custom">
                        <template slot-scope="scope">
                            <a target="_blank" :class="scope.row.titleClicked?&#39;titleClicked&#39;:&#39;&#39;" class="hoverHand bluetext" v-html="scope.row.title" @click="titleClick(scope.row.articleUrl,scope.$index)">
                            </a>
                        </template>
                    </el-table-column>
                    <el-table-column align="left" prop="releaseTime" label="发布日期" min-width="11%" sortable="custom"></el-table-column>
                    <el-table-column align="center" label="操作" min-width="9%">
                        <template slot-scope="scope">
                            <span class="operatoryTools">
                                <i title="取消收藏" v-if="scope.row.isFavour" @click="favoriteOperating(scope.row.id, scope.$index)" class="hoverHand iconStyle el-icon-star-on"></i>
                                <i title="收藏" v-else @click="favoriteOperating(scope.row.id, scope.$index)" class="hoverHand iconStyle el-icon-star-off"></i>
                                <i title="分享" @click.stop="showShareOperation(scope.$index)" class="shareTarg iconfont">&#xe678;</i>
                                <div class="share" v-if="scope.row.showShare">
                                    <img class="hoverHand shareItem" title="分享到微博" @click="shareItem(&#39;sina&#39;,$event);" src="@/images/WEIBO.png">
                                    <img class="hoverHand shareItem" title="分享到微信" @click.stop="shareItem(&#39;wx&#39;,$event);" src="@/images/WEIXIN.png">
                                    <img class="hoverHand shareItem" title="分享到QQ" @click="shareItem(&#39;qq&#39;,$event);" src="@/images/QQ.png">
                                </div>
                                <div v-show="scope.row.erweimaShare" class="erweima_share"></div>
                                <div v-show="scope.row.erweimaShare1" class="erweima_share1"></div>
                            </span>
                        </template>
                    </el-table-column>
                </el-table>

ログイン後にコピー

JS コード:

//点击清空条件，调用该方法
emptyAndSearch(){//清空条件方法
			//清空树选中状态
			this.clearTreeNodeCheck([&#39;tree&#39;]);
			//清除排序
			this.$refs.multipleSelection.clearSort();
			//设置分页参数
			this.queryParam = {
				startRow : 1,
                pageSize : 20,
                condition:{
                }
			}
			//分页查询调用
			this.confirmSearch(&#39;statistics&#39;);
			//设置清空条件为false
			this.$store.commit(&#39;valueDryGoodDatas/SET_CLEAR_ALL&#39;,false);
		}

ログイン後にコピー

例 3:

Vue コード:

 <el-form-item
                          ref="goodPicInfoFormpicUrl"
                          :label="$t(&#39;许可证证照&#39;)"
                          class="is-required"
                          prop="picUrl">
                          <el-upload
                            :show-file-list="false"
                            :http-request="uploadImg"
                            :data="certImgform"
                            action=""
                            class="avatar-uploader">
                            <img
                              v-if="queryFrom.picUrl"
                              :src="queryFrom.picUrl"
                              class="avatar">
                            <i
                              v-else
                              class="el-icon-plus avatar-uploader-icon"/>
                          </el-upload>
                          <el-button
                            type="primary"
                            plain
                            size="mini"
                            @click="viewPcPic(queryFrom.picUrl)">{{ $t(&#39;查看&#39;) }}</el-button>
                        </el-form-item>

ログイン後にコピー

JS コード:

      //获取元素清除验证
              this.$refs.goodPicInfoFormpicUrl.clearValidate()

ログイン後にコピー

一般的に、INPUT ボックスを取得したい場合は、まず DOM 要素を取得します。DOM ノードを取得するには document.querySelector (".input1") が必要です。、次に input1 の値を取得します。しかし、ref でバインドした後は、dom ノードを取得する必要がなくなり、input1 を上記の入力に直接バインドして、それを $refs で呼び出すことができます。

次に、これを JavaScript で呼び出します: this.$refs.input1 これにより、dom ノードの取得にかかる消費量を減らすことができます。

(学習ビデオ共有: vuejs 入門チュートリアル , 基本的なプログラミングのビデオ)

以上がvue の $refs とはどういう意味ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。