Vue.js基础-10-监听子组件事件（v-on）、绑定子组件数据（v-model）

文章目录

1. 监听子组件触发的事件（v-on）
- 说明
- 完整示例
2. 双向绑定prop和子组件数据（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] )

结果显示

posted on 2022-06-08 13:12 运维开发玄德公阅读(61) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue.js基础-09-组件（Component）

· Vue.js基础-06-绑定样式（v-bind）-03-单项绑定数据（v-bind:value）

· 【VUE】自定义组件数据双向绑定

· Vue全家桶系~1.Vue2基础（兼容）

· v-model的原理

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？

Vue.js基础-10-监听子组件事件（v-on）、绑定子组件数据（v-model）

文章目录

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

说明

完整示例

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

说明

完整示例

导航

统计

合集

	<!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>

Vue.js基础-10-监听子组件事件（v-on）、绑定子组件数据（v-model）

文章目录

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

说明

完整示例

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

说明

完整示例

导航

统计

合集

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