Vue 组件简介和使用

Question

组件 本质上是 自定义 HTML 元素 。 它们允许您将应用程序分解为可理解和可重用的块，而不是拥有一个单一的单一应用程序。 在本教程中，您将学习：

• 如何创建组件
• 如何使用组件管理内部状态
• 如何通过 props 将数据传递给组件
• 如何将数据从组件传递到其父级 $emit()

创建组件

要创建组件，您应该调用 Vue.component() 功能 。 这 Vue.component() 函数有 2 个参数：一个唯一的字符串 id 对于组件和对象 definition 的组件。

假设您有一个组件，其 id 是 hello。每当你包含一个元素 <hello></hello> 在 Vue 模板 中，Vue 会将元素替换为组件的模板。 下面是一个组件的示例 hello 使用在 <h1> 标签。

const helloComponent = Vue.component('hello', {
  template: '<h1>Hello, World</h1>'
});
// Technically, a component is a function
typeof helloComponent; // 'function'
helloComponent.name; // 'VueComponent'

// Internally, Vue keeps a map from ids to components in
// `Vue.options.components`
Vue.options.components['hello'] === helloComponent; // true

// Renders "<h1>Hello, World</h1>"
const app = new Vue({
  template: '<hello></hello>'
});
app.$mount('#content');

组件的内部状态

Vue 相对于 React 的一个优势是 表单元素上的两种数据绑定方式 。 Vue 中的表单使用起来很简单 v-model，但他们需要更多的 React 工作。

假设你想扩展 hello 带有输入的组件，因此用户可以输入他们的姓名。 你应该添加一个 data 起作用 对您的组件 definition 返回组件的初始状态。 确保为希望 Vue 监视的所有属性定义初始状态，即使它是 null。

Vue.component('hello', {
  data: () => ({
    name: 'World'
  }),
  template: `
    <div>
      <div>
        <input v-model="name"></input>
      </div>
      <h1>Hello, {{name}}</h1>
    </div>
  `
});

// Displays "Hello, World" initially, changes based on input
const app = new Vue({
  template: '<hello></hello>'
});
app.$mount('#content');

这是组件在运行中的样子。 你也可以 在这里看到一个活生生的例子 。

组件道具

假设您希望拥有单独的组件，而不是使用一个组件来处理用户输入和显示数据。 顶级 app 模板将显示 <input>，和 hello 组件将负责显示 <input>。

传递数据的方式 hello 组件正在使用 props 。 这 v-bind:name="name" 绑定的值 name 在里面 hello 组件模板的值 name 处于顶级应用状态。

// `props` is an array of prop names this component accepts. If you
// don't explicitly list a prop in `props`, you won't be able to use
// it in your template.
Vue.component('hello', {
  props: ['name'],
  template: '<h1>Hello, {{name}}</h1>'
});

// The app tracks `name` as internal state, and there's an input to
// modify `name` using `v-model`. Then, `v-bind:name` passes `name` as
// a prop to the `hello` component.
const app = new Vue({
  data: () => ({ name: 'World' }),
  template: `
    <div>
      <div>
        <input v-model="name"></input>
      </div>
      <hello v-bind:name="name"></hello>
    </div>
  `
});

这是一个基于道具的活生生的例子 hello 组件 。

$emit()

Props 允许您将数据从父组件传递到组件中。 这 $emit() 函数 允许您将数据从组件传递回其父级，通常是为了响应事件。

假设你想定义一个单独的 input-name 允许用户输入其姓名的组件。 当用户单击“更新”按钮时，您的应用会更新用户名并更新 <h1> 标签。 这是在 Vue 中的工作原理：

Vue.component('input-name', {
  data: () => ({ name: 'World' }),
  // When you click the "Update" button, Vue will emit an event `update`
  // to the parent, with the current state of 'name'.
  template: `
    <div>
      <input type="text" v-model="name">
      <button v-on:click="$emit('update', name)">
        Update
      </button>
    </div>
  `
});

const app = new Vue({
  data: () => ({ name: 'World' }),
  // To listen to the 'update' event, you create the `input-name`
  // component with a `v-on:update` attribute. `$event` contains
  // the value of the 2nd parameter to `$emit()`.
  template: `
    <div>
      <div>
        <input-name v-on:update="setName($event)"></input-name>
      </div>
      <h1>Hello, {{name}}</h1>
    </div>
  `,
  methods: {
    // Define a method that Vue will call to handle the 'update' event.
    setName: function(v) {
      this.name = v;
    }
  }
});
app.$mount('#content');

这是一个活生生的例子 。