如何在父事件上调用子组件上的函数

2020/10/21 21:22 · javascript ·  · 0评论

语境

在Vue 2.0中,文档和其他文档清楚地表明,父母之间通过道具进行的交流。

父母如何通过道具告诉孩子发生了什么事?

我应该只看一个叫做活动的道具吗?这感觉不对,也没有其他选择($emit/$on代表孩子到父母,而中心模型代表远处的元素)。

我有一个父容器,它需要告诉它的子容器可以在API上进行某些操作。我需要能够触发功能。

给子组件一个ref,用于$refs直接在子组件上调用方法。

的HTML:

<div id="app">
  <child-component ref="childComponent"></child-component>
  <button @click="click">Click</button>  
</div>

javascript:

var ChildComponent = {
  template: '<div>{{value}}</div>',
  data: function () {
    return {
      value: 0
    };
  },
  methods: {
    setValue: function(value) {
        this.value = value;
    }
  }
}

new Vue({
  el: '#app',
  components: {
    'child-component': ChildComponent
  },
  methods: {
    click: function() {
        this.$refs.childComponent.setValue(2.0);
    }
  }
})

有关更多信息,请参阅refs上的Vue文档

您所描述的是父级状态的改变。您通过道具将其传递给孩子。正如您所建议的那样,您将使用watch该道具。当子级采取行动时,它会通过通知父级emit,然后父级可能会再次更改状态。

如果您确实希望将事件传递给孩子,则可以通过创建总线(只是Vue实例)并将其作为prop传递给孩子来实现

您可以使用$emit$on使用@RoyJ代码:

的HTML:

<div id="app">
  <my-component></my-component>
  <button @click="click">Click</button>  
</div>

javascript:

var Child = {
  template: '<div>{{value}}</div>',
  data: function () {
    return {
      value: 0
    };
  },
  methods: {
    setValue: function(value) {
        this.value = value;
    }
  },
  created: function() {
    this.$parent.$on('update', this.setValue);
  }
}

new Vue({
  el: '#app',
  components: {
    'my-component': Child
  },
  methods: {
    click: function() {
        this.$emit('update', 7);
    }
  }
})

运行示例:https//jsfiddle.net/rjurado/m2spy60r/1/

在子组件上调用方法的一种简单的分离方式是,从子组件中发出一个处理程序,然后从父组件中调用该处理程序。

var Child = {
  template: '<div>{{value}}</div>',
  data: function () {
    return {
      value: 0
    };
  },
  methods: {
  	setValue(value) {
    	this.value = value;
    }
  },
  created() {
    this.$emit('handler', this.setValue);
  }
}

new Vue({
  el: '#app',
  components: {
    'my-component': Child
  },
  methods: {
  	setValueHandler(fn) {
    	this.setter = fn
    },
    click() {
    	this.setter(70)
    }
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<div id="app">
  <my-component @handler="setValueHandler"></my-component>
  <button @click="click">Click</button>  
</div>

父级跟踪子处理程序的功能,并在必要时进行调用。

不喜欢在期间在子级中使用绑定事件总线方法为什么?随后的调用(我正在使用)多次绑定消息处理程序-导致每条消息有多个响应。$oncreatecreatevue-router

通过道具下来从父到子,并把财产观察者在孩子的正统解决方案工作一点更好。唯一的问题是孩子只能在价值转变上行动。多次传递同一条消息需要某种簿记以强制过渡,以便孩子可以接管更改。

我发现,如果将消息包装在数组中,它将始终触发子观察程序-即使该值保持不变。

上级:

{
   data: function() {
      msgChild: null,
   },
   methods: {
      mMessageDoIt: function() {
         this.msgChild = ['doIt'];
      }
   }   
   ...
}

儿童:

{
   props: ['msgChild'],
   watch: {
      'msgChild': function(arMsg) {
         console.log(arMsg[0]);
      }
   }
}

HTML:

<parent>
   <child v-bind="{ 'msgChild': msgChild }"></child>
</parent>

如果有时间,请使用Vuex存储库来监视变量(即状态)或直接触发(即调度)操作。

以下示例是自我解释。引用和事件可用于在父子之间调用函数。

// PARENT
<template>
  <parent>
    <child
      @onChange="childCallBack"
      ref="childRef"
      :data="moduleData"
    />
    <button @click="callChild">Call Method in child</button>
  </parent>
</template>

<script>
export default {
  methods: {
    callChild() {
      this.$refs.childRef.childMethod('Hi from parent');
    },
    childCallBack(message) {
      console.log('message from child', message);
    }
  }
};
</script>

// CHILD
<template>
  <child>
    <button @click="callParent">Call Parent</button>
  </child>
</template>

<script>
export default {
  methods: {
    callParent() {
      this.$emit('onChange', 'hi from child');
    },
    childMethod(message) {
      console.log('message from parent', message);
    }
  }
}
</script>

我认为我们应该考虑父母使用孩子方法的必要性。事实上,父母不必关心孩子的方法,而是可以将孩子组件视为FSA(有限状态机)。来控制子组件的状态。因此,观察状态变化或仅使用计算功能的解决方案就足够了

您可以使用key通过key重新加载子组件

<component :is="child1" :filter="filter" :key="componentKey"></component>

如果要使用新的过滤器重新加载组件,请单击按钮以过滤子组件

reloadData() {            
   this.filter = ['filter1','filter2']
   this.componentKey += 1;  
},

并使用过滤器触发功能

本文地址:http://javascript.askforanswer.com/ruhezaifushijianshangdiaoyongzizujianshangdehanshu.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!