Vue:子组件如何跟父组件通信

我们知道,父组件使用 prop 传递数据给子组件。但子组件怎么跟父组件通信呢?这个时候 Vue 的自定义事件系统就派得上用场了。

使用 v-on 绑定自定义事件

每个 Vue 实例都实现了事件接口,即:

  • 使用 $on(eventName) 监听事件
  • 使用 $emit(eventName, optionalPayload) 触发事件

Vue 的事件系统与浏览器的 EventTarget API 有所不同。尽管它们运行起来类似,但是 $on 和 $emit 并不是addEventListener 和 dispatchEvent 的别名。

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

不能用 $on 监听子组件释放的事件,而必须在模板里直接用 v-on 绑定,参见下面的例子。

下面是一个例子:

<div id="counter-event-example">  <p>{{ total }}</p>  <button-counter v-on:increment="incrementTotal"></button-counter>  <button-counter v-on:increment="incrementTotal"></button-counter></div>
Vue.component(‘button-counter‘, {  template: ‘<button v-on:click="incrementCounter">{{ counter }}</button>‘,  data: function () {    return {      counter: 0    }  },  methods: {    incrementCounter: function () {      this.counter += 1      this.$emit(‘increment‘)    }  },})

new Vue({  el: ‘#counter-event-example‘,  data: {    total: 0  },  methods: {    incrementTotal: function () {      this.total += 1    }  }})

0

0 0

原文地址:https://www.cnblogs.com/qjuly/p/8848276.html

时间: 2024-11-06 03:31:04

Vue:子组件如何跟父组件通信的相关文章

父组件如何获取子组件数据,子组件如何获取父组件数据,父子组件如何传值

1.父组件如何主动获取子组件的数据 方案1:$children $children用来访问子组件实例,要知道一个组件的子组件可能是不唯一的,所以它的返回值是个数组 定义Header.HelloWorld两个组件 <template> <div class="index"> <Header></Header> <HelloWorld :message="message"></HelloWorld>

子组件如何改变父组件的state

子组件调用父组件的方法,从而改变父组件中state中的值 //父组件 change (value) { console.log(value) this.setState({ red: value.red }) console.log(this.state) } render () { return ( <> {this.state.red && this.state.red == 1 ? ( <div>red == 1</div> ) : null} &

vue.js组件之间通讯--父组件调用子组件的一些方法,子组件暴露一些方法,让父组件调用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"></div></body><script src="node_modules/vue/

vue 子组件传值给父组件

子组件通过this.$emit("event",[args,....]),传值给父组件 HTML部分: 1 <div id="app"> 2 <tmp1 @func="test"></tmp1> 3 </div> JS部分: 1 var app = new Vue({ 2 el: "#app", 3 data: {}, 4 methods: { 5 test(data) { 6

vue 解决双向绑定中 父组件传值给子组件后 父组件值也跟着变化的问题

说明: 近日开发中碰见一个很诡异的问题,  父组件动态的修改对象 data 中的值, 然后将这个对象 data 传给子组件, 子组件拿到后将 data 中的值 乘以 100 ,发现父组件中的值也跟着变化了,通过查阅资料,发现 是 VUE 双向绑定中的一个bug,就此给出解决办法,亲测有效 情景描述: 对象  data = { price: 0, flag: true, name: " 哈哈 " } 父组件 更改 data.parice = 100,   然后将 data对象 传给子组件

vue子组件向传父组件传值

子组件: <template>     <div class="app">        <input @click="sendMsg" type="button" value="给父组件传递值">     </div> </template> <script> export default {       data () {         return

vue.js(18)--父组件向子组件传值

子组件是不能直接使用父组件中数据的,需要进行属性绑定(v-bind:自定义属性名=“msg”),绑定后需要在子组件中使用props[‘自定义属性名’]数组来定义父组件的自定义名称. props数组中的数据是只读的,父组件中的data是可读可写的. 子组件自己的data,子组件可直接访问,与父组件无关. <div class="app"> <mycom1 v-bind:mymsg="msg"></mycom1> <!-- 子组

不触发事件,vue子组件传值给父组件

vue子传父,本来是以为是要通过触发一个事件,才能传值到父组件的. 结果原来可以不用的.别人说vuex,太麻烦了. 其实可以不用.那就看看怎么传吧. 先说下场景: 子组件created的时候就请求一些数据,请求来的数据,要传给父组件.此时都还没有触发任何事件.那么要传值给父组件,就要这么做了.(其实很简单的) 子组件代码: xxx.then(res=>{ this.childData = data.res this.$emit('cdata',this.childData) // 刚求完直接$e

vue子组件值跟着父组件改变

父组件 <template> <div id="list"> 父组件的值<input type="text" v-model="parentVal"> <div> <child :inputData="parentVal"></child> </div> </div> </template> <script>