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="@click="); "></pre> <p>我的父元件中的所有內容腳本，我正在點擊按鈕並呼叫函數。</p> <p>使用父元件中的所有程式碼更新我的問題：</p> <pre class="brush:php;toolbar:false;"><模板> <div class="container mt-3 bg-白色陰影圓形 p-3">

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