vue 3中从组件向子组件发送数据

Question

<p>我正在尝试将数据从我的父组件 <code>formTelemarketing</code> 发送到我的子组件 <code>nAsignedCalls</code> 来执行此操作，我正在父 <code>props 中执行一个 prop : { register: Number },</code> 当我单击提交按钮（不是提交按钮）时应该填充一个表格，我的操作按钮调用函数 <code>searchRegisters</code> 并从表单中获取值并使用 $emit 将 prop 发送到我的组件</p> <pre class="brush:php;toolbar:false;">this.$emit("registers", getCall(toRef(param_search,'param_search')))</pre> <p>在我的父组件中包含的子组件中，我有：</p> <pre class="brush:php;toolbar:false;"><div id="app5"> <nAsignedCalls @registers="getCall"></nAsignedCalls> </div></pre> <p>在我的导出默认子组件中，我有 props:['register']，在我的表中这个组件中，我有一个 for-each 应该从这个道具中获取所有数据...我没有控制台中出现任何错误，但我无法显示我的数据</p> <pre class="brush:php;toolbar:false;">{{ (register) ? register : "vacio" }} <template v-for="item of register"> <tr> <td>{{ item.id }}</td> <td>{{ (item.name) ? item.name : '' }} </td></pre> <p>例如，这是我的结构，我有一个条件来知道注册是否已填充，始终返回“vacio”。</p> <p>这是我在子组件中的 props 定义：</p> <pre class="brush:php;toolbar:false;">export default defineComponent({ name: 'nAsignedCalls', props:['register'],</pre> <p>我的 API 没问题，在控制台网络选项卡中我可以显示响应 ok <code>{"data":[{"id":895,"name":"Aguilera Muriel Fatimas",</code> i有更多数据...</p> <p>我不知道我做错了，我是 vue 的新手......</p> <p>感谢您的自述，并为我的英语不好而抱歉</p> <p><strong>更新</strong></p> <p>首先，我在我的项目中使用组合 API。</p> <p>现在，在我的子组件中我定义了我的事件</p> <pre class="brush:php;toolbar:false;">// personaliced event const emitMyEvent = (event) => emit('registers', event); return { remove, searchId, searchName, searchPhone, edit, getResults, getPage, emitMyEvent, getCall }</pre> <p>在我的 app.js 中，我重新定义了 app5：</p> <pre class="brush:php;toolbar:false;">const app5 = createApp({ components:{ nAsignedCalls }, setup() { const getCall = (event) => console.log('getCall(): ' + event.target.id); return { getCall } } }) app5.mount('#app5')</pre> <p>但是当我单击按钮时，我无法在网络或控制台中显示任何内容</p> <p><strong>我的按钮：</strong></p> <pre class="brush:php;toolbar:false;"><input type="button" class="btn btn-dark" value="Buscar registros" @click="searchRegisters()"></pre> <p>我的父组件中的所有内容脚本，我正在单击按钮并调用函数。</p> <p>使用父组件中的所有代码更新我的问题：</p> <pre class="brush:php;toolbar:false;"><模板> <div class="container mt-3 bg-白色阴影圆形 p-3"> <div class="row justify-content-start mt-4"> <div class=“col-md-6 ml-3”> <div class="form-group"> <div class="row justify-content-center"> <选择类=“表单控件” name="远程操作员" id="teleoperator_select" placeholder=“Teleoperadora”> <隐藏选项>Teleoperadora </选择>

Answer 1

更新2

在setup()函数中，您必须使用Composition API

使用Composition API，您可以通过setup()中获得emit函数。 org/api/composition-api-setup.html#setup-context" rel="nofollow noreferrer">设置上下文。

检查我的第一个示例：

您将获得 emit 函数

setup(props, { emit })

然后直接使用

emit("registers", getCall(toRef(param_search,'param_search')))

在您的情况下，您传递了设置上下文，因此您可以通过context调用emit

context.emit("registers", getCall(toRef(param_search,'param_search')))

看来您确实不需要定义自定义事件，但我仍然推荐它：

emits: ['registers']

请注意，this.$emit() 调用由 Options API 使用，而不是 Composition API

const { createApp, ref } = Vue;

const MyComp = {
  setup(props, { emit }) {
    const emitMyEvent = (event) => emit('registers', event);
    return { emitMyEvent }
  },
  template: `<button id="my-button" @click="emitMyEvent">emit</button>`
}

const App = { 
  components: { MyComp },
  setup() {
    const getCall = (event) => console.log('getCall(): ' + event.target.id);
    return { getCall }
  }
  
}
const app = createApp(App)
app.mount('#app')

#app { line-height: 2; }
[v-cloak] { display: none; }

<div id="app" v-cloak>
  <my-comp @registers="getCall"></my-comp> 
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

更新

与使用 this.$emit 的 Options API 相同

const { createApp, ref } = Vue;

const MyComp = {
  emits: ['registers'],  
  methods: {
    emitMyEvent: function(event) { this.$emit('registers', event) }
  },
  template: `<button id="my-button" @click="emitMyEvent">emit</button>`
}

const App = { 
  components: { MyComp },
  methods: {
    getCall: (event) => console.log('getCall(): ' + event.target.id)
  } 
}
const app = createApp(App)
app.mount('#app')

#app { line-height: 2; }
[v-cloak] { display: none; }

<div id="app" v-cloak>
  <my-comp @registers="getCall"></my-comp> 
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>