目录
组件使用
<template>
<div>
<h2>这是Input组件</h2>
<el-input v-model="input" placeholder="请输入内容"></el-input>
<el-input disabled placeholder="请输入内容"></el-input>
<el-input type="textarea" placeholder="请输入内容"></el-input>
<el-input v-model="input" size="medium" :maxlength="10" show-word-limit clearable placeholder="请输入内容"></el-input>
<el-input type="password" placeholder="请输入密码" v-model="input" show-password></el-input>
<!-- 事件使用-->
<h2>事件使用</h2>
<el-input v-model="username" @blur="changeBlur" @focus="changeFocus"></el-input>
<el-input v-model="password" @change="changed"></el-input>
<!-- 方法使用-->
<h2>方法使用</h2>
<el-input v-model="mes" ref="method"></el-input>
<el-button @click="focusInput">focus方法</el-button>
<el-button @click="blurInput">blur方法</el-button>
<el-button @click="selectInput">select方法</el-button>
</div>
</template>
<script>
export default {
name: 'Input',
data () {
return {
input: '',
username: '',
password: '',
mes: ''
}
},
methods: {
changeBlur () {
console.log(this.username)
},
changeFocus () {
console.log(this.username)
},
changed () {
console.log(this.password)
},
focusInput () {
this.$refs.method.focus()
},
blurInput () {
this.$refs.method.blur()
},
selectInput () {
this.$refs.method.select()
}
}
}
</script>
<style scoped>
</style>
总结
- 在使用组件的方法时需要在对应的组件中加入ref=“组件别名”
- 在调用方法时直接使用this.$refs.组件别名.方法名()
注意:在elementui中所有组件都存在属性事件和方法
- 属性:直接写在对应的组件标签上使用方式:属性名=属性值方式
- 事件:直接使用vue绑定事件方式写在对应的组件标签上使用方式:@事件名=vue中事件处理函数
- 方法:1.在对应组件标签上使用ref=组件别名;2.通过使用this.$refs.组件别名.方法名()进行调用