vue中ref的用法

ref

1. 預期：string

   ref 被用來給元素或子組件注冊引用信息。引用信息將會注冊在父組件的 $refs 對象上。

2. 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；

3. 如果用在子組件上，引用就指向組件實例：

   <!-- `vm.$refs.p` will be the DOM node --> <p ref="p">hello</p> <!-- `vm.$refs.child` will be the child component instance --> <child-component ref="child"></child-component>

   當 v-for 用於元素或組件的時候，引用信息將是包含 DOM 節點或組件實例的數組。

   關於 ref 注冊時間的重要說明：因為 ref 本身是作為渲染結果被創建的，在初始渲染的時候你不能訪問它們 - 它們還不存在！$refs 也不是響應式的，因此你不應該試圖用它在模板中做數據綁定。

　　   

 通過官方的說明，其實ref就是一個引用。

 

 

 

上圖中，有三處有ref

1）helloRef是一個組件里的，這個組件就是初創項目的時候顯示的一個字符串

2）yearInput是一個element-ui的一個文本框，用於輸入一個值

3）tableRef是一個element-ui的一個表格

 

 

getTableColumns是一個測試的method

第一行顯示的是一個字符串

第二行顯示的是輸入的值

第三行顯示的是一個表格的數據

 

<template>
  <div>
    <hello-world ref="helloRef"></hello-world>
    <el-input
      v-model="xs_year"
      placeholder="請輸入內容"
      @blur="inputChange"
      ref="yearInput"
    ></el-input>
    <el-table :data="tableData" ref="tableRef">
      <el-table-column prop="xs_year" label="日期" width="140">
      </el-table-column>
      <el-table-column prop="realname" label="姓名" width="120">
      </el-table-column>
      <el-table-column prop="xq_code" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getXsList } from '../api/index'
import Pagination from "../components/pagination";
import Progress from "../components/progress";
import HelloWorld from '../components/HelloWorld';

export default {
  name: "UserList",
  components: { Pagination, Progress, HelloWorld },
  data () {
    return {
      xs_year: '2018',
      pageR: {
        page: this.$page,
        size: this.$size
      },
      tableData: null
    }
  },
  created () {
  },
  mounted () {
    let _this = this;
    _this.getXsList(this.xs_year, null, null);
  },

  destroyed () {
  },
  methods: {
    inputChange () {
      this.getTableColumns();
    },
    getTableColumns () {
      console.log(this.$refs.helloRef.msg)
      console.log(this.$refs.yearInput.value)
      console.log(this.$refs.tableRef.data)
    },
    getXsList (xs_year, xq_code, realname) {
      this.loading = true;
      const params = {
        xs_year: xs_year,
        xq_code: xq_code,
        realname: realname
      };
      console.log(JSON.stringify(params));
      getXsList(params).then((res) => {
        if (res.data) {
          let r = res.data;
          this.tableData = r.rows;
        } else {
          this.showErrMsg('請求錯誤！');
        }
        this.loading = false;
      }).catch(() => {
        this.showErrMsg('請求錯誤！');
        this.loading = false;
      });
    }
  }

}
</script>
<style scoped>
</style>