vue-share/hello_world/src/components/GetValue.vue

<template>
  <div>
    <h1>{{title}}</h1>
    <input ref="input" v-model="input" type="text">
    <button @click="getVaule">获取值</button>
    <div class="tip">请F12打开console控制查看结果</div>
  </div>
</template>

<script>

export default {
    name:'GetValue',
    data(){
        return{
            title:'这是GetValue组件',
            input:'绑定的值',
        }
    },
    methods:{
        getVaule(){
            console.log('这是ref获取的值：'+this.$refs.input.value)
            console.log('通过this去定义好的值：'+this.input)
        }
    }
}
</script>

<style>
.tip{
    background: red;
    color: #fff;
    margin-top: 10px;
}
</style>