如何向Vue生成的Web Component传递对象？解决传参类型不匹配问题

嗨，我来帮你捋清楚这个问题——你遇到的是Vue组件和Web Component在属性传递机制上的差异，这确实很容易踩坑！

首先，先解释为什么你之前的两种写法都不行：

• 用card="card"的时候，HTML会把这个属性值当作字符串处理，所以组件收到的是字符串"card"，而不是你定义的那个对象，自然会触发类型检查失败的警告。
• 用:card="card"的时候，这个:是Vue单文件组件里的模板语法，只有在Vue自己管理的模板环境（比如Vue项目的.vue文件、Vue实例的template选项）里才会被解析。但当你直接在原生HTML里用导出的Web Component时，浏览器根本不认识这个语法，所以绑定不生效，组件拿到的card是undefined，就会报渲染错误。

那该怎么解决呢？分两种场景给你方案：

场景1：在原生HTML中直接使用Web Component #

因为Web Component的原生HTML属性只能传递字符串，要传递对象这类复杂数据，得直接操作DOM元素的属性（注意是DOM属性，不是HTML属性）。具体做法如下：

<script src="https://unpkg.com/vue"></script>
<body>
  <!-- 给组件加个id方便获取 -->
  <my-component id="targetCard"></my-component>

  <script>
    // 定义你的card对象
    const card = {
      name: 'card',
      graphic: 'https://static.anychart.com/images/gallery/v8/line-charts-line-chart.png',
      subtitle: 'about this card',
      info: 'this is a test content card',
      selector1: [
        { name: 'opt 1' },
        { name: 'opt 2' },
        { name: 'opt 3' }
      ],
      selector2: [
        { name: 'opt A' },
        { name: 'opt B' },
        { name: 'opt C' }
      ]
    };

    // 获取组件的DOM元素
    const myComp = document.getElementById('targetCard');
    // 直接给DOM元素的card属性赋值
    myComp.card = card;
  </script>
</body>

这样组件就能正确接收到你定义的对象了。

场景2：在Vue实例管理的页面中使用Web Component #

如果你的页面还是由Vue来管理的，那可以把组件放到Vue实例的模板里，继续用:card绑定，但要确保card变量在Vue实例的作用域内（比如放到data里）：

<script src="https://unpkg.com/vue"></script>
<body>
  <div id="app">
    <my-component :card="card"></my-component>
  </div>

  <script>
    const cardData = {
      // 你的card对象内容
      name: 'card',
      graphic: 'https://static.anychart.com/images/gallery/v8/line-charts-line-chart.png',
      subtitle: 'about this card',
      info: 'this is a test content card',
      selector1: [
        { name: 'opt 1' },
        { name: 'opt 2' },
        { name: 'opt 3' }
      ],
      selector2: [
        { name: 'opt A' },
        { name: 'opt B' },
        { name: 'opt C' }
      ]
    };

    new Vue({
      el: '#app',
      data() {
        return {
          card: cardData
        }
      }
    });
  </script>
</body>

这种情况下，Vue会正常解析:card绑定，把对象传递给Web Component，和你在Vue项目里的用法一致。

内容的提问来源于stack exchange，提问作者Carlos De La Cuerda Gomez