vue.js组件对象找不到_Vue.js组件

vue.js组件对象找不到

Components are single, independent units of an interface. They can have their own state, markup and style.

组件是接口的单个​​独立单元。 他们可以有自己的状态，标记和样式。

如何使用组件 (How to use components)

Vue components can be defined in 4 main ways.

Vue组件可以通过4种主要方式进行定义。

Let’s talk in code.

让我们谈谈代码。

The first is:

第一个是：

new Vue({
  /* options */
})

The second is:

第二个是：

Vue.component('component-name', {
  /* options */
})

The third is by using local components: components that only accessible by a specific component, and not available elsewhere (great for encapsulation).

第三个是通过使用本地组件：只能由特定组件访问而在其他地方不可用的组件(用于封装的组件)。

The fourth is in .vue files, also called Single File Components.

第四个在.vue文件中，也称为“ 单个文件组件” 。

Let’s dive into the first 3 ways in detail.

让我们详细介绍前三种方式。

Using new Vue() or Vue.component() is the standard way to use Vue when you’re building an application that is not a Single Page Application (SPA) but rather uses Vue.js just in some pages, like in a contact form or in the shopping cart. Or maybe Vue is used in all pages, but the server is rendering the layout, and you serve the HTML to the client, which then loads the Vue application you build.

当您构建的应用程序不是单页应用程序(SPA)而是仅在某些页面中使用Vue.js(例如在联系人中new Vue()使用new Vue()或Vue.component()是使用Vue的标准方法表格或购物车中。 也许在所有页面中都使用了Vue，但是服务器正在渲染布局，然后您将HTML提供给客户端，然后客户端将加载您构建的Vue应用程序。

In an SPA, where it’s Vue that builds the HTML, it’s more common to use Single File Components as they are more convenient.

在SPA中，是由Vue构建HTML的，使用单文件组件更为方便，因此更为常见。

You instantiate Vue by mounting it on a DOM element. If you have a <div id="app"></div> tag, you will use:

您可以通过将Vue安装在DOM元素上来实例化Vue。 如果您有<div id="app"></div>标记，则将使用：

new Vue({ el: '#app' })

A component initialized with new Vue has no corresponding tag name, so it’s usually the main container component.

用new Vue初始化的组件没有相应的标签名称，因此通常是主要的容器组件。

Other components used in the application are initialized using Vue.component(). Such a component allows you to define a tag, with which you can embed the component multiple times in the application, and specify the output of the component in the template property:

使用Vue.component()初始化应用程序中使用的其他组件。 这样的组件允许您定义一个标记，您可以使用该标记在应用程序中多次嵌入该组件，并在template属性中指定该组件的输出：

<div id="app">
  <user-name name="Flavio"></user-name>
</div>

Vue.component('user-name', {
  props: ['name'],
  template: '<p>Hi {{ name }}</p>'
})

new Vue({
  el: '#app'
})

What are we doing? We are initializing a Vue root component on #app, and inside that, we use the Vue component user-name, which abstracts our greeting to the user.

我们在做什么？ 我们正在#app上初始化Vue根组件，在其中，我们使用Vue组件user-name ，它抽象了向用户的问候。

The component accepts a prop, which is an attribute we use to pass data down to child components.

该组件接受一个prop，这是我们用来将数据向下传递给子组件的属性。

In the Vue.component() call we passed user-name as the first parameter. This gives the component a name. You can write the name in 2 ways here. The first is the one we used, called kebab-case. The second is called PascalCase, which is like camelCase, but with the first letter capitalized:

在Vue.component()调用中，我们传递了user-name作为第一个参数。 这将为组件命名。 您可以在此处以两种方式输入名称。 第一个是我们使用的kebab-case 。 第二个称为PascalCase ，类似于camelCase，但是第一个字母大写：

Vue.component('UserName', {
  /* ... */
})

Vue internally automatically creates an alias from user-name to UserName, and vice versa, so you can use whatever you like. It’s generally best to use UserName in the JavaScript, and user-name in the template.

Vue在内部自动创建一个从user-name到UserName的别名，反之亦然，因此您可以使用任何喜欢的别名。 通常最好在JavaScript中使用UserName ，在模板中使用user-name 。

本地组件 (Local components)

Any component created using Vue.component() is globally registered. You don’t need to assign it to a variable or pass it around to reuse it in your templates.

使用Vue.component()创建的任何组件都是全局注册的 。 您无需将其分配给变量或将其传递以在模板中重复使用。

You can encapsulate components locally by assigning an object that defines the component object to a variable:

您可以通过将定义组件对象的对象分配给变量来在本地封装组件：

const Sidebar = {
  template: '<aside>Sidebar</aside>'
}

and then make it available inside another component by using the components property:

然后使用components属性使其在另一个组件内部可用：

new Vue({
  el: '#app',
  components: {
    Sidebar
  }
})

You can write the component in the same file, but a great way to do this is to use JavaScript modules:

您可以在同一文件中编写组件，但是一种很好的方法是使用JavaScript模块：

import Sidebar from './Sidebar'

export default {
  el: '#app',
  components: {
    Sidebar
  }
}

重用组件 (Reusing a component)

A child component can be added multiple times. Each separate instance is independent of the others:

子组件可以添加多次。 每个单独的实例都独立于其他实例：

<div id="app">
  <user-name name="Flavio"></user-name>
  <user-name name="Roger"></user-name>
  <user-name name="Syd"></user-name>
</div>

Vue.component('user-name', {
  props: ['name'],
  template: '<p>Hi {{ name }}</p>'
})

new Vue({
  el: '#app'
})

组件的组成部分 (The building blocks of a component)

So far we’ve seen how a component can accept the el, props and template properties.

到目前为止，我们已经看到了组件如何接受el ， props和template属性。

• el is only used in root components initialized using new Vue({}), and identifies the DOM element the component will mount on.

  el仅在使用new Vue({})初始化的根组件中使用，并标识组件将安装在其上的DOM元素。

• props lists all the properties that we can pass down to a child component

  props列出了我们可以传递给子组件的所有属性

• template is where we can set up the component template, which will be responsible for defining the output the component generates.

  template是我们可以在其中设置组件模板的地方，它将负责定义组件生成的输出。

A component accepts other properties:

组件接受其他属性：

• data the component local state

  data组件本地状态

• methods: the component methods

  methods ：组件方法

• computed: the computed properties associated with the component

  computed ：与组件关联的计算属性

• watch: the component watchers

  watch ：组件观察者

翻译自: https://flaviocopes.com/vue-components/

vue.js组件对象找不到