时间戳

首页 > 解决方案 > 我的 html 代码无法访问我的 vue 组件

vue.js - 我的 html 代码无法访问我的 vue 组件

问题描述

这是我使用 vue 的第二天。我已经在使用 webpack 和 vue-cli，但我想了解如何使所有内容都在一个文件中工作。我开发了一个运行良好的代码，但我想重构代码以拥有一个组件，我以后可以使用它来生成充满颜色变化图块的屏幕。

我试过Vue.component('name', {})了，但没有结果，因为在控制台中我看到[Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions.并且[Vue warn]: Unknown custom element: <brick> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

此代码运行良好：

<html>
  <head>
    <title>v pavle</title>
    <script type="text/javascript" src="https://vuejs.org/js/vue.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/javascript">
      var vm = new Vue({
        el: "#app",
        template:
          '<div v-bind:style="styleobj" v-on:mouseover="changebgcolor" v-on:mouseout="changebgcolor"></div>',
        data: {
          styleobj: {
            width: "100px",
            height: "100px",
            backgroundColor: "white"
          }
        },
        methods: {
          changebgcolor: function() {
            this.styleobj.backgroundColor = Math.floor(
              Math.random() * 16777215
            ).toString(16);
          }
        }
      });
    </script>
  </body>
</html>

该代码提供了一切，但不是我想看到的:(

<html>
  <head>
    <title>v pavle</title>
    <script type="text/javascript" src="https://vuejs.org/js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <brick></brick>
    </div>
    <script type="text/javascript">
      var vm = new Vue({
        el: "#app"
      });

      var brick = Vue.component("brick", {
        template:
          '<div v-bind:style="styleobj" v-on:mouseover="changebgcolor" v-on:mouseout="changebgcolor"></div>',
        data: {
          styleobj: {
            width: "100px",
            height: "100px",
            backgroundColor: "white"
          }
        },
        methods: {
          changebgcolor: function() {
            this.styleobj.backgroundColor = Math.floor(
              Math.random() * 16777215
            ).toString(16);
          }
        }
      });
    </script>
  </body>
</html>

对你来说这似乎很容易，但花了 7 小时后，对我来说就没有什么了，只是问你 SO

标签： vue.jsvue-component

解决方案

好的，我会回答你的2个问题。首先，关于数据，它必须是一个函数。所以你必须这样写：

data() {
  return {
    styleobj: {
      width: "100px",
      height: "100px",
      backgroundColor: "white"
    }
  }
}

之后，您忘记在 Vue 实例中引用您的组件。试试看：

var vm = new Vue({
  el: "#app",
  components: {
    brick: brick
  }
})

希望它会奏效。

推荐阅读