自定义组件之v-model的使用

v-model的语法糖可以为下面v-bind && @input联合完成:

<input v-model="text">
<!-- 以上相当于如下写法 -->
<input :value="text" @input="text=$event.target.value">

父子组件通信的时候,可在父组件的孩子组件上面使用v-model,默认触发子组件指定的event和prop接受参数

父组件:

<template>
  <div id="father">
    <p>{{ text }}</p>
    <child v-model="text"></child>
  </div>
</template>

<script>
import child from "./child.vue";
export default {
  name: "father",
  components: { child },
  data: function () {
    return {
      text: "我是父组件",
    };
  }
}
</script>

<style lang="less" scoped></style>

子组件:

<template>
  <div id="child">
    <p>{{ msg }}</p>
    <button @click="btnClick">点击改变父组件内容</button>
  </div>
</template>

<script>
export default {
  name: 'child',
  model: {
    prop: "msg",
    event: "respond",
  },
  props: {
    msg: {
      type: String,
    },
  },
  methods: {
    btnClick() {
      this.$emit("respond", "我是子组件");
    },
  },
};
</script>

<style lang="less" scoped></style>

注意:在组件上使用v-mode时,其被使用组件上应该有个model对象配置,用于接受v-model传递过来的信息,它有两个属性,prop是要指定传过来的属性接收参数,event是v-model时要指定绑定的事件名(由当前被使用组件定义)。

以上example中父组件上的 v-model 会把 msg用作 prop 且把 respond用作 event。这样就可以实现父子组件之间的通信,子组件可以拿到父组件传过来的值,子组件也可以更改值。

作者:|star*时光£裔℡|,原文链接: https://www.cnblogs.com/zjh-time-memos/p/16340304.html

文章推荐

linux-ext4格式文件误删除,该如何恢复?

记一次生产事故的排查与优化——Java服务假死

.NET Core 读取配置技巧 - IOptions<TOptions> 接口

简单聊聊设备指纹设计

k8s docker 中部署think php 并搭建php websocket

程序员做外包,真的没地位没出路吗?

Arch Linux配置gnome桌面

JPA自动生成POJO

记录一次用宝塔部署微信小程序Node.js后端接口代码的详细过...

超详细:如何在windous系统下使用wsl虚拟机安装Ubuntu

python 实现超快窗口截图,自动获取当前活动窗口并展示截图

人最重要的能力是什么?