小编Pay*_*ari的帖子

我有一个带按钮的 Vue 组件。单击按钮时，将调用一个方法。我正在使用 Jest 进行单元测试。我期望在按钮上创建合成事件的.trigger方法vue-test-utils，但它什么也不做。

我尝试通过调用wrapper.vm.addService()然后使用直接在包装器上调用该方法console.log(wrapper.emitted())，我确实可以看到一个事件已被触发。所以我的问题是为什么addServiceBtn.trigger('click')不做任何事情。

的console.log(wrapper.emitted())是一个空对象。测试结果失败并显示错误消息：Expected spy to have been called, but it was not called.

服务项.vue

<template>
  <v-flex xs2>
    <v-card>
      <v-card-text id="itemTitle">{{ item.title }}</v-card-text>
      <v-card-actions>
        <v-btn flat color="green" id="addServiceBtn" @click="this.addService">Add</v-btn>
      </v-card-actions>
    </v-card>
  </v-flex>
</template>

<script>
export default {
  data: () => ({
    title: ''
  }),
  props: {
    item: Object
  },
  methods: {
    addService: function (event) {
      console.log('service item')
      this.$emit('add-service')
    }
  }
}
</script>

测试规范.js

import …

似乎有很多围绕这一话题的讨论,如使用集线器答案#1,利用裁判答案#1,所以我真的想问问专家提供一次清晰简洁的回答了这个问题.如果答案也是不可能的,请说明!

这是一个场景:有两个组件,父母和孩子

<Parent> // There is a button here that can be clicked to emit an event using 'this.$emit()'
   <Child></Child> // The child listens and once hears the event, it does something
</Parent>

该怎么办？

单击Parent中的按钮发出特定事件,孩子将不断地监听,一​​旦听到事件,它就会执行一个动作,例如调用自己的方法.

到目前为止,有什么关于这个的？

1. 使用集线器,在Vue Hub中明确指出这是针对非父母 - 儿童沟通的,那么使用它进行亲子沟通有什么意义呢？

2. 使用Refs,当无法使用道具和事件时,它作为最终解决方案提供.那么为什么不能在第一时间举办活动呢？

我自己的想法

在我看来,一个事件的发射和听取它只能从孩子到父母,基本上是单向沟通.父节点能够发出事件,但子组件无法捕获事件.为什么？我尝试过这个并没有奏效:

在我的父组件中(通过单击父组件中的按钮触发):

methods: {
  generateCharts: function () {
    this.$emit('generate-charts')
    console.log('charts generated')
}

在子组件我有:

mounted () {
 this.parent.$on('generate-charts', function () {
   console.log('event captured') // Here nothing gets logged to the console …

我正在尝试使用 flexbox 来设计我的布局。基本上我的目标是：将按钮“我是按钮”一直移动到 flex 容器的右端，并将其他两个社交按钮保留在容器的左侧。

<div class="quote-box quote">

  <h2>This is where the quote text is going to beThis is where the quote text is going to beThis is where the quote text is going to be</h2>
  <p class="quote-writter">Quote writer</p>

  <div class="buttons">
  <span class="my-button"><a href="#" class="get-quote-butt">I am a button</a></span>
  <a href="#" class="tweet-quote-butt"><i class="fa fa-2x fa-twitter"></i>
  <a href="#" class="tumblr-quote-butt"><i class="fa fa-2x fa-tumblr"></i>
  </a>
  </div>
</div>


</div>

这是CSS

.wrapper {
 max-width:750px;
 margin: 0 auto;
 display:flex; 
 align-items:center;
 order:1;
 }

 .quote-box {
  background:rgba(255,255,255,0.2);
  margin:20px;
  padding:20px; …

从draw.io 可以将图表嵌入为 HTML，但是，当尝试在 React 应用程序中使用生成的 HTML 时，屏幕上不会显示任何内容。以下脚本也被加载到 HTML 页面中：<script type="text/javascript" src="https://viewer.diagrams.net/js/viewer-static.min.js"></script>

知道为什么这不起作用吗？

如果我将完全相同的代码和 HTML 放入一个没有 React 的文件中，一切都会按预期工作。

JS

const mystyle = {
  maxWidth: "100%",
  border: "1px solid transparent"
}

ReactDOM.render(
  <div className="mxgraph" style={mystyle} data-mxgraph="{&quot;highlight&quot;:&quot;#0000ff&quot;,&quot;nav&quot;:true,&quot;resize&quot;:true,&quot;toolbar&quot;:&quot;zoom layers lightbox&quot;,&quot;edit&quot;:&quot;_blank&quot;,&quot;xml&quot;:&quot;&lt;mxfile host=\&quot;app.diagrams.net\&quot; modified=\&quot;2021-04-08T16:37:39.233Z\&quot; agent=\&quot;5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36\&quot; etag=\&quot;O3fNti_B0JlDfU6ko1tb\&quot; version=\&quot;14.5.8\&quot; type=\&quot;google\&quot;&gt;&lt;diagram id=\&quot;3VQJ_haBxNLfYGOJBekl\&quot; name=\&quot;Page-1\&quot;&gt;zZZdb5swFIZ/DZeRAqQ0vUwJ68c0dVJUTdoNcu0TbBUwsg8D9utngiEgWjW7ibiKec4by+exZXD8MKsfFCn4D8kgdbw1qx1/73ieG6y35qcljSXu+rYjiRKsY+szOIi/YIM9LQUDbVmHUMoURTGFVOY5UJwwopSsprGjTNkEFCSByTJacKAkhVnsl2DIO7q9GaUfQSQch/5sJSN92ALNCZPVCPmR44dKSuxGWR1C2tqbevn2SXVYmIIcL/nDHW1U9DtSm9fb77s4eno5Pq9WdpY/JC1twzQVjr8zbE80f5NEsdCQrgNsei1KljmDdmbX8e8rLhAOBaFttTInwTCOWWrL+h2QcvtwlDke7EQf9NAvCBRCPUK2pweQGaBqTMRWVxvr154wr3+uztvl9nvAR1sVWEbsCUmGqc8SzcB6/A+n3sypyIsSY4byZDZIzQru35QZJe0oqoGWKPJkV4inNrk3weUKd4MLhG+vKdyfCYdeaUwKEZf0S++vGkKiYcHaN97StG9m2lvZhFLQOk4IQkWaD8UPN4sRvzvFF+w92C7N+83Muyzx0gvm5RRd9g1zd8mVflXlwUx5oUCbDkF9afxZy/znkF6udfOSvJ5283j+8jnVRh+QfvQP&lt;/diagram&gt;&lt;/mxfile&gt;&quot;}"></div>,
  document.getElementById('root')
);

超文本标记语言

<div id="root"></div>

我正在试验Flask和AJAX，这里有一条简单的API路由，托管在OpenShift上。我想使用Ajax在Javascript文件中调用API。OpenShift Python文件很简单：

from flask import Flask
app = Flask(__name__)

import json

@app.route('/hello/<name>')
def hello_world(name=None):
    str = {'key':'Hello World!', 'q':name}
    #out = {'key':str}
    res = json.dumps(str)
    return res

if __name__ == '__main__':
    app.run()

这是Ajax调用：

$.ajax({
    type:"GET",
    dataType: "json",
    data:'Payam',
    url: "http://mypythonapp-spacepirate.rhcloud.com/hello/",
    success: function(data){
        buf1=data;
        console.log(data);
    }
})

但这会调用此URL，结果为404。如何解决此问题？仅提及CORS并不是问题。

http://mypythonapp-spacepirate.rhcloud.com/hello/?Payam