$ref使用

1. $ref用来获取组件实例，不通过父子通信，可以获取组件的所有方法及data的变量
2. $ref需要在dom挂载后才能获取到,否则undefined

获取原生dom节点

<div id="box">
   <h2>ref- 获取原生dom节点</h2>
   <input type="text" ref="myinput"/>
   <div ref="mydiv">111111111111111111111111</div>
   <button @click="handleGet()">获取</button>
</div>

new Vue({
  el:"#box",
  methods:{
      handleGet(){
        console.log(this.$refs.myinput.value) // 页面input框内输入的值
        console.log(this.$refs.mydiv) // <div ref="mydiv">111111111111111111111111</div>
      }
    }
})

获取组件实例

<div id="box">
   <h2>ref-登录页-获取组件实例，不通过父子通信，直接拿状态和赋值状态</h2>
   <!-- mylabel, mytype是用来父传子-->
   <!-- mychange是用来子传父-->
   <!-- ref是用来获取子组件实例，跳过父子通信-->
   <vant-field mylabel="用户名" mytype="text" @mychange="handleChange"></vant-field>
   <vant-field mylabel="密码" mytype="password" ref="mypassword"></vant-field>
   <vant-field mylabel="年龄" mytype="number" ref="myage"></vant-field>
   <button @click="handleLogin">登录</button>
   <button>重置</button>
</div>

// 全局组件vant-field
Vue.component("vant-field",{
  props:["mylabel","mytype"], // 用来接收父组件传递过来的mylabel，mytype
  data(){
    return {
      mytext:""
    }
  },
  // 这里:type="mytype" 一定要用:type。因为这里的mytype是一个变量，从父组件传递过来的
  // type="mytype" 这么写的话，组件到时会解析成 <input type="mytype" />
  // :type="mytype",假设传递过来的数据是text，到时会解析成 <input type="text" />
  template:`
    <div>
       <label>{{mylabel}}</label>:
       <input :type="mytype" v-model="mytext" @input="handleInput"/>
    </div>
  `,
  methods:{
    handleInput(){
      // console.log(this.mytext)
      this.$emit("mychange",this.mytext) //触发子传父
    }
  }
})
new Vue({
  el:"#box",
  data:{
    myusername:""
  },
  methods:{
      handleChange(data){
        // console.log("父组件定义的",data)
        this.myusername = data;
      },
      handleLogin(){
        console.log("表单的用户名",this.myusername)
        console.log("表单的密码",this.$refs.mypassword.mytext)
        console.log("表单的年龄",this.$refs.myage.mytext)
        this.$refs.myage.mytext = 2000
      }
    }
})