vue.js 组件交互_Vue组件：交互式Vue JS教程

vue.js 组件交互

In my previous tutorial we learned the basics of Vue.js: the Vue instance, the template syntax, data object, directives, methods and more. This was enough to get started creating with very basic Vue examples.

在我之前的教程中，我们学习了Vue.js的基础知识：Vue实例，模板语法，数据对象，指令，方法等。 这足以开始使用非常基本的Vue示例进行创建。

Note: check out this playlist if you’re interested in watching all my Vue screencasts.

注意：如果您有兴趣观看我所有的Vue屏幕录像， 请查看此播放列表 。

But if you want to build proper apps with Vue, you’ll need to learn about components. It’s one of the most powerful features of the library.

但是，如果您想使用Vue构建合适的应用程序，则需要了解组件。 这是该库最强大的功能之一。

Components makes your code more reusable and your markup more readable.

组件使您的代码更具可重用性，并使标记更具可读性。

They’ll let you create custom HTML elements, which will behave exactly how you want them to. To create a Vue.js component, do the following:

它们将允许您创建自定义HTML元素，这些元素的行为将完全符合您的期望。 要创建Vue.js组件，请执行以下操作：

Vue.component('my-component', {  template: '<div>A custom component!</div>'})

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

The template key is where you write your markup for that component. In the same object you’ll later add more functionalities. You create an instance of your component through adding <my-component></my-component> in the HTML:

template key是您为该组件编写标记的地方。 稍后，您将在同一个对象中添加更多功能。 您可以通过在HTML中添加<my-component></my-co mponent>来创建组件的实例 ：

<div id="app">      <my-component></my-component></div>

This will result in the following being rendered on the page:

这将导致在页面上呈现以下内容：

Here is a Scrimba screencast explaining the same concept. It’s interactive, so you can pause the screencast and edit the code whenever you want.

这是解释相同概念的Scrimba屏幕录像 。 它是交互式的，因此您可以随时暂停截屏并编辑代码。

道具 (Props)

The component above doesn’t do much. To make it a bit more usable, let’s add props to it:

上面的组件没有做太多事情。 为了使它更有用，让我们添加一些道具：

Vue.component('my-component', {  props: ['message'],  template: `<div>{{ message }}</div>`,})

Props will enable you to pass data into a component instance from the outside of that component. Or more correctly, pass the data down from a parent.

道具将使您能够从组件外部将数据传递到组件实例中。 或更正确地说，是从父级向下传递数据。

The my-component has one prop called message, which it’ll render out. The value of message will be defined when we create new instances of this component in the DOM. We can create as many my-component’s as we want, and give each of them different props. Thus we’ll be able to re-use our code.

my-component有一个称为message道具，它将进行渲染。 当我们在DOM中创建该组件的新实例时，将定义message的值。 我们可以根据需要创建任意数量的my-component ，并为它们提供不同的道具。 这样我们就可以重用我们的代码。

To pass data down as the message prop, simply do the following:

要将数据作为message传递下来，只需执行以下操作：

<div id="app">      <my-component message="Hello from Vue.js!"></my-component></div>

Now, Hello from Vue.js! will be rendered on the page.

现在， 您好Vue.js！ 将呈现在页面上。

But this is still a very static solution, as we’ve hard coded the value of the prop in the HTML. A better solution would be to bind this value to a data source. Then we can change it how we want later on, like based upon user interactions or responses from API’s.

但这仍然是一个非常静态的解决方案，因为我们已经在HTML中硬编码了prop的值。 更好的解决方案是将该值绑定到数据源。 然后，我们可以根据用户交互或API的响应来更改它，以便以后更改。

Let’s bind it to the data object on our Vue instance. First we’ll create the data object.

让我们将其绑定到Vue实例上的数据对象。 首先，我们将创建数据对象。

var app = new Vue({    el: '#app',    data: {      msg: 'Hello from the Vue instance'    }})

To bind the prop in my-component to the msg in our Vue instance, we’ll use the v-bind directive we learned in the previous article:

要将my-component的prop绑定到Vue实例中的msg ，我们将使用在上一篇文章中了解到的v-bind指令：

<div id="app">      <my-component v-bind:message="msg"></my-component></div>

Now, we can change the data through app.msg = 'Some new data' and Vue will take care of updating the DOM with the new data.

现在，我们可以通过app.msg = 'Some new data'更改数据，Vue将负责用新数据更新DOM。

Tip: You can remove the v-bind from v-bind:message and rather use the :message shorthand.

提示： 您可以从v-bind:message删除v-bind ，而使用:message速记。

Here is a Scrimba screencast explaining the concept:

这是解释该概念的Scrimba屏幕录像 ：

But what if you want your component to be able to change its message? This can’t happen as long as message is a prop, as you should never mutate a prop inside a component. If you try to, Vue will give you a warning in the console.

但是，如果您希望组件能够更改其message怎么办？ 只要message是一个道具，就不会发生这种情况，因为您永远都不应在组件内部更改道具。 如果尝试这样做，Vue会在控制台中向您发出警告。

数据 (Data)

So we’ll need another way of handling data inside the component. This is where the data function comes into play. It will allow your components to handle internal state, which you can change how you wants to.

因此，我们需要另一种处理组件内部数据的方法。 这是data功能发挥作用的地方。 它将允许您的组件处理内部状态，您可以更改内部状态。

Component data fills the same role as the data object in the Vue instance. They’re both places where you’ll hold mutable data. But, component data is a function and not an object.

组件data扮演的角色与Vue实例中的data对象相同。 它们都是存储可变数据的地方。 但是，组件data是功能而不是对象 。

Let’s jump into the code, to make it less abstract.

让我们跳入代码，使其不那么抽象。

Vue.component('my-component', {  template: '<div> {{ message }} </div>',  data: function() {    return {      message: 'Hello from Vue data!'    }  }})

Here is a Scrimba screencast which explains the concept.

这是Scrimba的截屏视频 ，解释了这一概念。

And that’s about it! There are of course many more things to learn about Vue components. But this should be enough for you to start playing around with it on your own.

就是这样！ 当然，有关Vue组件还有很多事情要学习。 但是，这足以让您自己开始使用它。

If you learn something new about Vue, I’d recommend you to pass that knowledge on to others as well. That’s one of the best ways to learn, and the reason that communities like freeCodeCamp thrive.

如果您了解有关Vue的新知识，我建议您也将这些知识传递给其他人。 这是最好的学习方法之一，也是像freeCodeCamp这样的社区蓬勃发展的原因。

So go ahead and write an article (or create a Scrimba screencast) about your what you’ve learned!

因此，继续写一篇关于您所学知识的文章(或创建Scrimba屏幕录像)！

翻译自: https://www.freecodecamp.org/news/vue-js-components-an-interactive-guide-1b8149ecc254/

vue.js 组件交互