美文网首页前端精髓技术干货
学会在组件中使用v-mode

学会在组件中使用v-mode

作者: 前端精髓 | 来源:发表于2018-10-12 22:33 被阅读30次

往往组件拆分需要负责数据的传递,通常会通过自定义事件来数据交互,但是如果使用v-module来做数据的交互,这样也许会简单很多。

子组件UserInfo.vue

<template>
  <div>
    <input
      type="text"
      :value="value"
      @input="value=$event.target.value">
  </div>
</template>

<script>
  export default {
    props: {
      value: {
        type: String,
        default: ''
      }
    }
  }
</script>

父组件引用子组件

<user-info v-model="msg"></user-info>

一个组件上的 v-model 默认会利用名为 valueprop 和名为 input 的事件。参考链接

这样写简单很多了,比起子组件$emit父组件自定义事件的形式

相关文章

  • 学会在组件中使用v-mode

    往往组件拆分需要负责数据的传递,通常会通过自定义事件来数据交互,但是如果使用v-module来做数据的交互,这样也...

  • Vue核心知识-Vue的组件之高级属性

    插槽 slot 是 vue 的内置组件。 简单使用 定义一个布局组件,里面放什么会在调用组件时决定,我们不会在布局...

  • vue3 api学习

    1.setup 为什么不能使用this? a:因为在setup中为了避免使用this,因为他不会在组件实例上面找到...

  • 钉钉E应用组件的使用

    js中: json中: 使用组件的页面 json 中: 使用组件的页面 axml 中:

  • 动态组件的使用

    动态组件是使用实现组件的切换,一般都会在组件外定义一个按钮,对组件的切换...

  • vue导航完成前后获取数据

    当你使用这种方式时,我们会马上导航和渲染组件,然后在组件的created钩子中获取数据。这让我们有机会在数据获取期...

  • 组件传值

    一. 组件注册 把组件写入公用基础组件中: 二.使用组件 在页面中使用: 三.写组件页面

  • Vue UI组件库 项目说明

    这是我个人的开发的1套Vue UI组件库,我会在开发过程中,记录每个组件的细节和使用方式。 这是项目的github地址:

  • React Native自定义导航栏

    之前我们学习了可触摸组件和页面导航的使用的使用:从零学React Native之09可触摸组件...从零学Reac...

  • provide/inject

    使用provide传递当前组件实例 在后代组件中接收组件

网友评论

    本文标题:学会在组件中使用v-mode

    本文链接:https://www.haomeiwen.com/subject/ojknaftx.html