小编Cir*_*ker的帖子

在 Vue 3 中，我创建了以下Home组件，另外 2 个组件（Foo和Bar），并将其传递给vue-router如下所示。的Home分量是利用Vue公司的创建的component功能，而Foo与Bar组件使用纯对象创建。

我得到的错误：

Component is missing template or render function.

在这里，Home组件导致了问题。我们不能将 的结果传递component()给路由对象vue-router吗？

<div id="app">
   <ul>
      <li><router-link to="/">Home</router-link></li>
      <li><router-link to="/foo">Foo</router-link></li>
      <li><router-link to="/bar">Bar</router-link></li>
   </ul>
   <home></home>
   <router-view></router-view>
</div>

<script>
   const { createRouter, createWebHistory, createWebHashHistory } = VueRouter
   const { createApp } = Vue
   const app = createApp({})

   var Home = app.component('home', {
      template: '<div>home</div>',
   })

   const Foo …

我在将对象数组传递给 Vue.js 2.2 中的组件时遇到问题。

这是我的组件

<vue-grid :fields = "[
  {name: 'Person Name', isSortable: true}, 
  {name: 'Country', isSortable: true}]"
></vue-grid>

它不起作用，因为它在浏览器中呈现花括号。
我试过没有"在对象中引用并且:在fields属性前没有冒号。这些都不起作用。但是，如果我只是传递一个有效的简单字符串。我不知道为什么对象不起作用。
我发现了一个类似的问题，但为 php 给出了答案。我只需要 JavaScript 的解决方案。我想对组件中的对象数组进行硬编码。

如何将 v-model 用于两级深度嵌套组件？例如在 HTML 中

<opening-hr-field v-model="day"> </opening-hr-field>

这day是一个对象，例如{is24Open: true, startTime: '5:00 PM'}

JS模板

<template type="text/x-template" id="opening-hr-field-template">
  <div>
    <input type="checkbox" v-model="value.is24Open"> 24 hour
     <time-select v-model = "value.startTime"></time-select>
  </div>
</template>

<template  type="text/x-template" id="time-select-template">
  <select :value="value" 
    v-on:input="$emit('input', $event.target.value)">
    <option v-for="t in getHours()">
      {{ t }}
    </option>
  </select>
</template>

在这里，我有两层深 v 模型。如何将发射从第二个模板传播到第一个模板并一直传播到父模板？你能给我举个例子吗？