Question

这是我第二天使用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个小时之后，对我来说别无所求了，只想问一遍

Answer 1

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

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

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

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

希望它会起作用。

Answer 2

数据必须是类似data: function(){ return obj }
使用components: {yourcomponent}
您需要在颜色前使用#。

<html>
  <head>
    <title>v pavle</title>
    <script type="text/javascript" src="https://vuejs.org/js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      Hello App!
      <brick>Hello Brick</brick>
    </div>
    <script type="text/javascript">
      var brick = Vue.component("brick", {
        template:
          '<div :style="styl" @click="changebgcolor" @mouseover="changebgcolor" @mouseout="changebgcolor"><slot></slot></div>',
        data: function(){
          return {
            styl: {
              width: "100px",
              height: "100px",
              backgroundColor: "#b6d8a1",
              color: "blue"
            }
          };
        },
        methods: {
          changebgcolor: function() {
            console.log('changebgcolor!');
            this.styl.backgroundColor = "#"+ Math.floor(
              Math.random() * 16777215
            ).toString(16);
          }
        }
      });
      var vm = new Vue({
        el: "#app",
        components:{brick:brick}
      });

      
    </script>
  </body>
</html>

Answer 3

在使用Vue.component时，您需要确保在开始渲染应用程序后已经注册了所有组件。此刻，您首先渲染主应用程序，然后注册该组件，因此将它们交换

  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);
      }
    }
  });
  var vm = new Vue({
    el: "#app"
  });

Answer 4

组件上的data属性应该是一个返回对象的函数。为什么？因为否则，您的组件的所有实例都共享相同的数据，这意味着应用程序上的所有图块将具有相同的颜色。

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

在启动Vue实例之前，您应该首先注册组件，只需重新排序代码即可！

我的HTML代码无法到达我的Vue组件

4 个答案: