Vue.js基础之监听子组件事件v-on及绑定数据v-model学习

更新时间：2023年06月21日 09:33:34 作者：开发运维玄德公

这篇文章主要为大家介绍了Vue.js基础之监听子组件事件v-on及绑定数据v-model学习，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

1. 监听子组件触发的事件（v-on）

说明

父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件

完整示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CROW-宋</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <div id="counter-event-example">
      <p>蜀国新兵：{{ total }} 万</p>
      <!-- 打印三个按钮，每个绑定 "incrementTotal"以计算total值 -->
      <button-counter v-on:increment="incrementTotal"></button-counter> 汉中招兵<br>
      <button-counter v-on:increment="incrementTotal"></button-counter> 益州招兵<br>
      <button-counter v-on:increment="incrementTotal"></button-counter> 蜀郡招兵<br>
    </div>
  </div>
  <script>
    // 注册组件
    Vue.component('button-counter', {
      //绑定incrementHandler函数以计算counter值，在按钮中打印counter值
      template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
      data: function () {
        return {
          counter: 0
        }
      },
      //为组件提供 counter的计算
      methods: {
        incrementHandler: function () {
          this.counter += 1
          //子组件中使用$emit方法调用该事件并传参
          this.$emit('increment')
        }
      },
    })
    new Vue({
      el: '#counter-event-example',
      data: {
        total: 0
      },
      methods: {
        incrementTotal: function () {
          this.total += 1
        }
      }
    })
  </script>
</body>
</html>

结果显示

2. 双向绑定prop和子组件数据（v-model）

说明

组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件

完整示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CROW-宋</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <we-input v-model="num"></we-input>
    <p>输入的数字为:{{num}}</p>
  </div>
  <script>
    Vue.component('we-input', {
      template: `
    <p>
      <input
       ref="input"
       :value="value" 
       @input="$emit('input', $event.target.value)"
      >
    </p>
    `,
      props: ['value'],
    })
    new Vue({
      el: '#app',
      data: {
        num: 100,
      }
    })
  </script>
</body>
</html>

说明：

ref="input"：获取input的值
:value="value" ：
即v-bind:value 单向绑定data中的数据到input上（给input一个初始值，之后input改变，data不会跟随改变。）
@input="$emit('input', $event.target.value)"：
让父组件监听到自定义事件 $emit( eventName, […args] )

结果显示

以上就是Vue.js基础之监听子组件事件v-on及绑定数据v-model学习的详细内容，更多关于Vue监听绑定子组件的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Vue如何实现多页面配置以及打包方式
这篇文章主要介绍了Vue如何实现多页面配置以及打包方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue3 name 属性的使用技巧详解
这篇文章主要为大家介绍了vue3 name 属性的使用技巧详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
Vue实现动态显示表单项填写进度功能
这篇文章主要介绍了Vue实现动态显示表单项填写进度功能，此功能可以帮助用户了解表单填写的进度和当前状态，提高用户体验，通常实现的方式是在表单中添加进度条，根据用户填写状态动态更新进度条，感兴趣的同学可以参考下文
2023-05-05
详解在vue3中使用jsx的配置以及一些小问题
本文主要介绍了在vue3中使用jsx的配置以及一些小问题，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
vue+element 多个相同的select不允许重复选择问题
这篇文章主要介绍了vue+element 多个相同的select不允许重复选择问题，具有很好的参考价值，希望对大家有所帮助。
2022-07-07
详解如何在vue项目中使用eslint+prettier格式化代码
在开发中我们需要一种能够统一团队代码风格的工具，作为强制性的规范，统一整个项目的代码风格，这篇文章主要介绍了详解如何在vue项目中使用eslint+prettier格式化代码，需要的朋友可以参考下
2018-11-11
vue2中的el-select组件数据太多,如何实现滚动加载数据效果
这篇文章主要介绍了vue2中的el-select组件数据太多,如何实现滚动加载数据效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-04-04
Vue3中插槽(slot)用法汇总(推荐)
这篇文章主要介绍了Vue3中插槽(slot)用法汇总,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-08-08
laravel5.3 vue 实现收藏夹功能实例详解
这篇文章主要介绍了laravel5.3 vue 实现收藏夹功能，本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
2018-01-01
vue3项目中各个文件的作用详细介绍
在Vue3项目中,通常会有以下一些常见的目录和文件,下面这篇文章主要给大家介绍了关于vue3项目中各个文件的作用,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-09-09