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项目中Token的使用方式
这篇文章主要介绍了vue项目中Token的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-09-09
Vue3的el-table-column增加跳转其他页面的方法
文章介绍了如何在Vue3的el-table-column中增加跳转其他页面的功能,并提供了示例代码和handleUpdate方法的源码分析,感兴趣的朋友跟随小编一起看看吧
2025-02-02
Vue 样式绑定的实现方法
学习 Vue 的时候觉得样式绑定很简单，但是使用的时候总是容易搞晕自己。这篇文章主要介绍了Vue 样式绑定的实现方法，感兴趣的小伙伴们可以参考一下
2019-01-01
Vuejs第八篇之Vuejs组件的定义实例解析
这篇文章主要介绍了Vuejs第八篇之Vuejs组件的定义实例解析的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-09-09
Vue3关于响应式数据类型详解(ref、reactive、toRef、及toRefs)
这篇文章主要介绍了Vue3关于响应式数据类型(ref、reactive、toRef、以及toRefs),本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-01-01
解决vue-cli webpack打包开启Gzip 报错问题
这篇文章主要介绍了vue-cli webpack打包开启Gzip 报错问题的解决方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-07-07
vue项目实现登陆注册效果
这篇文章主要为大家详细介绍了vue项目实现登陆注册效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
解决element-ui el-input赋值后不能编辑的问题
这篇文章主要介绍了解决element-ui el-input赋值后不能编辑的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-02-02
vite.config.js或者vue.config.js配置方式
这篇文章主要介绍了vite.config.js或者vue.config.js配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
离线搭建vue环境运行项目详细步骤
由于公司要求在内网开发项目,而内网不能连接外网,因此只能离线安装vue环境,下面这篇文章主要给大家介绍了关于离线搭建vue环境运行项目的详细步骤,需要的朋友可以参考下
2023-11-11