vue官方文档（9）在组件中使用v-model属性

最新推荐文章于 2024-04-02 11:47:32 发布

amadeus_liu2

最新推荐文章于 2024-04-02 11:47:32 发布

阅读量122

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/amadeus_liu2/article/details/127592437

版权

Vue 专栏收录该内容

70 篇文章 0 订阅

订阅专栏

<template>
  <div >
   
  <custom-input v-model="searchText"></custom-input>
  <button @click="getSearchText">获取searchText</button>
</div>


</template>


<script>

// eslint-disable-next-line
//import { Lazyload } from 'vant';
import Vue from 'vue'
//import {Toast} from 'vant';
//import {Notify} from 'vant'


Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})


export default {
  data() {
    return {
      searchText:'',
    };
  },
    mounted() {
   
  },
  methods: {
    getSearchText(){
      alert(this.searchText);
    }
  
  },
};
</script>

<style >
  

</style>