cari

Rumah  >  Artikel  >  hujung hadapan web  >  详细解读Vue.js中的组件使用方法以及作用？

详细解读Vue.js中的组件使用方法以及作用？

亚连
亚连asal
2018-06-08 14:04:053403semak imbas

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。这篇文章主要介绍了vue.js 中的组件，需要的朋友参考下

介绍

在使用Vue.js时，Vue.js组件非常重要。在本教程中，我们将深入研究Vue.js组件，理解基础知识并将其应用于应用程序。让我们开始吧。 

什么是组件？

组件使我们能够将 复杂的 应用程序分解成小块。例如，典型的Web应用程序将具有标题，侧边栏，内容和页脚等部分。

Vue.js允许我们将每个部分分解成单独的模块化代码，称为组件。这些组件可以扩展，然后附加到 你 正在处理的应用程序。 使用 组件是 在 整个应用程序 编写 中重用代码的好方法。

假设 你 有一个博客应用程序，并且 你 想要显示 一列 博客 帖子 。使用Vue组件，你可以做：

<blog-post></blog-post>

Vue处理剩下的事情。

创建一个将Vue实例挂载到DOM元素的简单HTML页面。 你 将使用它来了解组件。以下是HTML页面 样例 ：

<!DOCTYPE html>
<html>
<head>
<title>VueJs Components</title>
</head>
<body>
 <!-- p where Vue instance will be mounted -->
 <p id="app"></p>
 
 <!-- Vue.js is included in your page via CDN -->
 <script src="https://unpkg.com/vue"></script>
 <script>
  // A new Vue instance is created and mounted to your p element
  new Vue({
   el: &#39;#app&#39;,
   data: {
   domain: &#39;Tutsplus&#39;
   },
   template: &#39;<p>Welcome to {{ domain }}</p>
  });
 </script>
</body>
</html>

在上面，你创建了一个简单的Vue实例，在代码中没有组件因素。 现在，如果 你 希望欢迎消息出现两次，那么 你 怎么做？

你的猜测可能是 让 p   在 Vue实例挂载的地方出现两次。 这是行不通的。 尝试改变它从 id 到 class ， 你会得到 ：

<!DOCTYPE html>
<html>
<head>
<title>VueJs Components</title>
</head>
<body>
 <!-- p where Vue instance will be mounted -->
 <p class="app"></p>
 <p class="app"></p>
 
 <!-- Vue.js is included in your page via CDN -->
 <script src="https://unpkg.com/vue"></script>
 <script>
  // A new Vue instance is created and mounted to your p element
  new Vue({
   el: &#39;.app&#39;,
   data: {
   domain: &#39;Tutsplus&#39;
   },
   template: &#39;<p>Welcome to {{ domain }}</p>
  });
 </script>
</body>
</html>

它仍然不会工作！

解决这个问题的唯一方法是创建一个组件。 你如何创建一个组件？

组件是使用Vue.component（）构造函数创建的。 这个构造函数有两个参数：你的组件的名字（也可以叫做标签名）和一个包含组件选项（options）的对象。

让我们使用上面的内容创建一个组件。

Vue.component(&#39;welcome-message&#39;, {
  data: function() {
  return {
   domain: &#39;Tutsplus&#39;
  }
  },
  template: &#39;<p>Welcome to {{ domain }}</p>&#39;
 })

在上面，组件名称被称为welcome-message。 你的组件可以有你选择的任何名称。 然而重要的是，这个名字不会影响任何HTML标签，因为你不想重写它。

传递给构造函数的options对象包含数据和模板。 在创建组件时，你的数据应该是一个函数，如上所见。 被保存的数据应该作为一个对象返回。

在没有数据可以传递的情况下，传递如下的模板：

 Vue.component(&#39;welcome-message&#39;, {
  template: &#39;<p>Welcome to Tutsplus</p>&#39;
 })

完成之后，可以通过使用传递给构造函数的名称将其当作常规HTML元素来在应用程序中使用组件。 它被这样调用：b96f265ddb2ff8b5c74c4b8864998c55 99483aea6b39271594c4a1f67cf42565。

要多次输出模板，可以根据需要多次调用组件，如下所示。




VueJs Components


 
 

 
 
 
 
 

 
 
 
 <script>
 Vue.component(&amp;#39;welcome-message&amp;#39;, {
  data: function() {
  return {
   domain: &amp;#39;Tutsplus&amp;#39;
  }
  },
  template: &amp;#39;&lt;p&gt;Welcome to {{ domain }}&lt;/p&gt;&amp;#39;
 })
 
 // A new Vue instance is created and mounted to your p element
 new Vue({
  el: &#39;#app&#39;
 });
 </script>

这样一来，欢迎消息将显示四次。

将数据存储在组件中

上面我提到数据必须是一个函数，它所包含的信息必须作为一个对象返回。 为什么这样？

当返回的数据不是对象时，使用该数据的组件共享相同的源：共享数据。 因此，一个组件的数据变化会影响另一个组件。 当数据作为对象返回时，这是不一样的。

看看这是如何实际工作是很重要的。 首先，让我们看看数据作为对象返回的情况。

<!DOCTYPE html>
<html>
<head>
<title>VueJs Components</title>
</head>
<body>
 <!-- p where Vue instance will be mounted -->
 <p id="app">
 <welcome-message></welcome-message>
 <welcome-message></welcome-message>
 </p>
 
 <!-- Vue.js is included in your page via CDN -->
 <script src="https://unpkg.com/vue"></script>
 <script>
 var data = { name: &#39;Henry&#39; }
 
 Vue.component(&#39;welcome-message&#39;, {
  data: function() {
  return data
  },
  template: &#39;<p>Hello {{ name }}, welcome to TutsPlus (<button @click="changeName">Change Name</button>)</p>&#39;,
  methods :{
   changeName: function() {
   this.name = &#39;Mark&#39;
   }
  }
 })
 
 // A new Vue instance is created and mounted to your p element
 new Vue({
  el: &#39;#app&#39;
 });
 </script>
</body>
</html>

你能猜到上面发生了什么吗？

有两个组件，并且这两个组件共享相同的数据源，因为数据不作为对象返回。 你怎么证明我是对的？ 当从浏览器查看上述页面时，你将看到一个组件的更改会导致另一个组件的数据发生更改。那么它应该是怎样的呢？

像这样：

<!DOCTYPE html>
<html>
<head>
<title>VueJs Components</title>
</head>
<body>
 <!-- p where Vue instance will be mounted -->
 <p id="app">
 <welcome-message></welcome-message>
 <welcome-message></welcome-message>
 </p>
 
 <!-- Vue.js is included in your page via CDN -->
 <script src="https://unpkg.com/vue"></script>
 <script>
 
 Vue.component(&#39;welcome-message&#39;, {
  data: function() {
  return {
   name: &#39;Henry&#39;
  }
  },
  template: &#39;<p>Hello {{ name }}, welcome to TutsPlus (<button @click="changeName">Change Name</button>)</p>&#39;,
  methods :{
   changeName: function() {
   this.name = &#39;Mark&#39;
   }
  }
 })
 
 // A new Vue instance is created and mounted to your p element
 new Vue({
  el: &#39;#app&#39;
 });
 </script>
</body>
</html>

这里的数据是作为一个对象返回的，一个组件的改变不会影响另一个组件。 该功能是针对单个组件执行的。 在构建应用程序时，不要忘记这一点，这很重要。

创建和使用组件

使用到目前为止学到的内容，让我们使用 vue -cli 从头开始一个新的Vue.js项目来实现它。 如果你的机器上没有安装 vue -cli ，你可以通过运行：

npm install -g vue-cli

开始你的新的Vue.js项目：

vue init webpack vue-component-app

导航到你的应用程序，安装依赖关系，并使用下面的命令运行你的开发服务器。

cd vue-component-app
npm install
npm run dev

首先，你将重命名HelloWorld组件，这个组件是你将应用程序初始化为Hello.vue时创建的组件。然后你将注册这个组件作为一个全局组件在你的应用程序中使用。

所以你的Hello组件应该看起来像这样。

#src/components/Hello.vue
<template>
 <p class="hello">
 <p>Welcome to TutsPlus {{ name }}</p>
 <hr>
 <button @click="changeName">Change Display Name</button>
 </p>
</template>
<script>
export default {
 name: &#39;Hello&#39;,
 data () {
 return {
  name: &#39;Henry&#39;
 }
 },
 methods: {
 changeName () {
  this.name = &#39;Mark&#39;
 }
 }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
 font-weight: normal;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
</style>

你有欢迎文本显示欢迎消息和作为数据传递的名称。 当点击欢迎消息下方的按钮时，将调用changeName方法。 名字将从亨利改为马克。

要全局使用此组件，必须被注册。你能猜到应该在哪里完成这个操作吗？如果你说main.js，恭喜你，答对了！

要注册一个组件，可以导入它，然后使用Vue.component（）构造函数进行设置。自己动手试试。

我敢打赌，这个对你来说小菜一碟。以下是main.js文件中的内容。

#src/main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from &#39;vue&#39;
import App from &#39;./App&#39;
import Home from &#39;./components/Hello&#39;
Vue.config.productionTip = false
Vue.component(&#39;display-name&#39;, Home)
/* eslint-disable no-new */
new Vue({
 el: &#39;#app&#39;,
 template: &#39;<App/>&#39;,
 components: { App }
})

这里除了导入你的Hello组件的那一行之外，没有什么新东西。然后使用构造函数注册该组件。最后，对于这部分，组件需要使用你输入的组件名称来显示。在这种情况下，组件是显示名称。这将在你的App.vue文件中完成。

打开src / App.vue并使其看起来像这样。

#src/App.vue
<template>
<p id= "app" >
<display-name/>
</p>
</template>
<script>
export default {
}
</script>
<style>
#app {
font-family: &#39;Avenir&#39; , Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

打开服务器，打开http：// localhost：8080。 点击按钮，名称应该改变。

我们来看看如何在本地使用一个组件。

在组件目录中创建一个名为Detail.vue的文件。 这个组件不会做任何特殊的事情 - 它将被用在Hello组件中。

使你的Detail.vue文件就像这样。

#src/components/Detail.vue
<template>
 <p class="hello">
 <p>This component is imported locally.</p>
 </p>
</template>
<script>
export default {
 name: &#39;Detail&#39;
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
 font-weight: normal;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
</style>

要在Hello组件中使用它，可以像导入Hello组件一样将其导入。 接下来，把它注册，但这次你不需要使用Vue.component（）构造函数。

你可以使用导出内的组件对象进行注册。将用作元素标记的组件的名称必须作为值传递给对象。 完成后，你现在可以使用元素标记来输出组件。

为了理解这一点，Hello组件应该长这样：

#src/components/Hello.vue
<template>
 <p class="hello">
 <p>Welcome to TutsPlus {{ name }}</p>
 <hr>
 <button @click="changeName">Change Display Name</button>
 <!-- Detail component is outputted using the name it was registered with -->
 <Detail/>
 </p>
</template>
<script>
// Importation of Detail component is done
import Detail from &#39;./Detail&#39;
export default {
 name: &#39;HelloWorld&#39;,
 data () {
 return {
  name: &#39;Henry&#39;
 }
 },
 methods: {
 changeName () {
  this.name = &#39;Mark&#39;
 }
 },
 /**
 * Detail component gets registered locally.
 * This component can only be used inside the Hello component
 * The value passed is the name of the component
 */
 components: {
 Detail
 }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
 font-weight: normal;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
</style>

刷新页面以查看新页面。

范围组件样式

Vue.js允许你为组件提供全局和本地样式。是什么意思呢？在某些情况下，你希望组件中的某些元素与另一个组件中的对应元素的样式不同。Vue.js能够帮助你。

一个很好的例子是你刚刚建立的小应用程序。App.vue中的样式是全局的; 这怎么可能？ 打开你的App.vue，风格部分看起来像这样。

<style>
#app {
 font-family: &#39;Avenir&#39;, Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

这与Detail.vue不同，看起来像这样。

<style scoped>
h1, h2 {
 font-weight: normal;
}
 
ul {
 list-style-type: none;
 padding: 0;
}
 
li {
 display: inline-block;
 margin: 0 10px;
}
 
a {
 color: #42b983;
}
</style>

将   scoped 添加到样式标签是造成这个差别的原因。 尝试通过删除   scoped 来编辑一种组件样式，你会看到这是如何运作的。

结论

虽然这个文章有点长，但是我相信你会喜欢它。

现在你知道如何有效地使用组件，并且了解如何在现有应用程序中构建组件。在使用vue-cli时，你还可以在本地和全局范围内创建和使用组件。当你想为一个组件使用特定的风格时，你已经看到了如何使用scoped来做到这一点。

你现在可以继续构建使用组件的复杂Vue.js应用程序。了解Vue.js允许你重用代码，你的页眉，页脚，登录面板和搜索栏可以用作组件。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在vue中如何使用ztree（详细教程）

使用JS如何实现瀑布流插件

在JS中如何实现将html转为pdf功能

Atas ialah kandungan terperinci 详细解读Vue.js中的组件使用方法以及作用？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：vue全局组件总结Artikel seterusnya：文件编码base64通过AJAX上传

Artikel berkaitan

Lihat lagi