父组件
<template>
<div>
<!-- 子组件 -->
<Slot_input v-model="str"></Slot_input>
<!--显示子组件输入框的值 -->
<div>now str is:{{str}}</div>
</div>
</template>
<script>
/* 引入子组件 */
import Slot_input from "./slot_input";
export default {
name: "Hellow",
data() {
return {
str: "",
};
},
components: {
/* 调用子组件 */
Slot_input,
},
};
</script>
子组件
<template>
<div>
<!-- 子组件输入框 -->
<!-- 通过 v-on:input绑定输入触发的方法input_src,$event.target.value传递输入的值-->
<input type="text " v-on:input="input_src($event.target.value)" />
</div>
</template>
<script>
export default {
name: "slot_input",
data() {
return {};
},
methods: {
/* this.$emit("input", e);给父组件传值 */
input_src(e) {
this.$emit("input", e);
},
},
};
</script>
实际效果