发表于： 2021-08-03 21:05:03
1 2039
今天完成的事情：Vue的数据绑定；父子组件传值；后端交互方法的学习；
明天计划的事情：后端交互方法的运用；
收获：
input 输入框数据获取：
HTML：
<template>
<div class="hello">
<div class="main">
<div class="landing">
<input
class="ipt"
id="ipt_text"
type="text"
placeholder="请输入账号"
maxlength="11"
v-model="ipt_text"
/><br />
<input
class="ipt"
id="ipt_pwd"
type="password"
placeholder="请输入密码"
maxlength="16"
v-model="ipt_pwd"
/><br />
<button class="btn" id="but" @click="but">登陆</button>
</div>
</div>
</div>
</template>
JS ：
export default {
name: 'HelloWorld',
data () {
return {
ipt_text: '',
ipt_pwd: ''
}
},
methods: {
but () {
console.log(this.ipt_text)
console.log(this.ipt_pwd)
}
}
}
父子组件传值：
子组件：
HTML：
<template>
<div class="confirm-button">
<button @click="getButtonClick">{{ text || "确认" }}</button> // 点击事件
</div>
</template>
JS：
<script>
export default {
name: 'confirm-button',
props: ['text'], // 父组件传给子组件的值
data () {
return {
msg: true
}
},
methods: {
getButtonClick () { // 点击按钮向父组件传值
this.$emit('message', this.msg)
}
}
}
</script>
父组件传给子组件的值通过 props 接受
子组件通过 $emit 向父组件传值
父组件引入子组件：
引入：import Confirm from '../sub/Confirm'
注册：在 <script></script> 标签内的 name代码块后面加上 components: {Confirm}
使用：在 <template></template> 内加上<confirm></confirm>
HTML：
<template>
<div id="app">
<input type="text" v-model="ipt" />
<button @click="but">搜索</button>
<confirm text="注册" @message="getButtonClick"></confirm> // 传给子组件的值
</div>
</template>
JS：
<script>
import Confirm from '../sub/Confirm.vue'
export default {
components: { Confirm },
name: 'Home',
data () {
return {
ipt: ''
}
},
methods: {
but () {
console.log(this.ipt)
},
getButtonClick (val) { // val 为子组件传给父组件的值
alert(val)
}
}
}
</script>
返回列表
评论