解析Vue.js中的组件

程序员文章站 2022-04-29 12:37:52

介绍在使用vue.js时，vue.js组件非常重要。在本教程中，我们将深入研究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>
 <!-- div where vue instance will be mounted -->
 <div id="app"></div>
 
 <!-- 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 div element
  new vue({
   el: '#app',
   data: {
   domain: 'tutsplus'
   },
   template: '<p>welcome to {{ domain }}</p>
  });
 </script>
</body>
</html>

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

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

<!doctype html>
<html>
<head>
<title>vuejs components</title>
</head>
<body>
 <!-- div where vue instance will be mounted -->
 <div class="app"></div>
 <div class="app"></div>
 
 <!-- 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 div element
  new vue({
   el: '.app',
   data: {
   domain: 'tutsplus'
   },
   template: '<p>welcome to {{ domain }}</p>
  });
 </script>
</body>
</html>

它仍然不会工作！

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

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

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

vue.component('welcome-message', {
  data: function() {
  return {
   domain: 'tutsplus'
  }
  },
  template: '<p>welcome to {{ domain }}</p>'
 })

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

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

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

 vue.component('welcome-message', {
  template: '<p>welcome to tutsplus</p>'
 })

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

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

<!doctype html>
<html>
<head>
<title>vuejs components</title>
</head>
<body>
 <!-- div where vue instance will be mounted -->
 <div id="app">
 <welcome-message></welcome-message>
 <welcome-message></welcome-message>
 <welcome-message></welcome-message>
 <welcome-message></welcome-message>
 </div>
 
 <!-- vue.js is included in your page via cdn -->
 <script src="https://unpkg.com/vue"></script>
 <script>
 vue.component('welcome-message', {
  data: function() {
  return {
   domain: 'tutsplus'
  }
  },
  template: '<p>welcome to {{ domain }}</p>'
 })
 
 // a new vue instance is created and mounted to your div element
 new vue({
  el: '#app'
 });
 </script>
</body>
</html>

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

将数据存储在组件中

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

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

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

<!doctype html>
<html>
<head>
<title>vuejs components</title>
</head>
<body>
 <!-- div where vue instance will be mounted -->
 <div id="app">
 <welcome-message></welcome-message>
 <welcome-message></welcome-message>
 </div>
 
 <!-- vue.js is included in your page via cdn -->
 <script src="https://unpkg.com/vue"></script>
 <script>
 var data = { name: 'henry' }
 
 vue.component('welcome-message', {
  data: function() {
  return data
  },
  template: '<p>hello {{ name }}, welcome to tutsplus (<button @click="changename">change name</button>)</p>',
  methods :{
   changename: function() {
   this.name = 'mark'
   }
  }
 })
 
 // a new vue instance is created and mounted to your div element
 new vue({
  el: '#app'
 });
 </script>
</body>
</html>

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

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

像这样：

<!doctype html>
<html>
<head>
<title>vuejs components</title>
</head>
<body>
 <!-- div where vue instance will be mounted -->
 <div id="app">
 <welcome-message></welcome-message>
 <welcome-message></welcome-message>
 </div>
 
 <!-- vue.js is included in your page via cdn -->
 <script src="https://unpkg.com/vue"></script>
 <script>
 
 vue.component('welcome-message', {
  data: function() {
  return {
   name: 'henry'
  }
  },
  template: '<p>hello {{ name }}, welcome to tutsplus (<button @click="changename">change name</button>)</p>',
  methods :{
   changename: function() {
   this.name = 'mark'
   }
  }
 })
 
 // a new vue instance is created and mounted to your div element
 new vue({
  el: '#app'
 });
 </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>
 <div class="hello">
 <p>welcome to tutsplus {{ name }}</p>
 <hr>
 <button @click="changename">change display name</button>
 </div>
</template>
<script>
export default {
 name: 'hello',
 data () {
 return {
  name: 'henry'
 }
 },
 methods: {
 changename () {
  this.name = 'mark'
 }
 }
}
</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 'vue'
import app from './app'
import home from './components/hello'
vue.config.productiontip = false
vue.component('display-name', home)
/* eslint-disable no-new */
new vue({
 el: '#app',
 template: '<app/>',
 components: { app }
})

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

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

#src/app.vue
<template>
<div id= "app" >
<display-name/>
</div>
</template>
<script>
export default {
}
</script>
<style>
#app {
font-family: 'avenir' , 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>
 <div class="hello">
 <p>this component is imported locally.</p>
 </div>
</template>
<script>
export default {
 name: '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>

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

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

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

#src/components/hello.vue
<template>
 <div 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/>
 </div>
</template>
<script>
// importation of detail component is done
import detail from './detail'
export default {
 name: 'helloworld',
 data () {
 return {
  name: 'henry'
 }
 },
 methods: {
 changename () {
  this.name = 'mark'
 }
 },
 /**
 * 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: 'avenir', 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.js中的组件，希望对大家有所帮助

上一篇：从零开始最小实现react服务器渲染详解

下一篇： WPF实现左右移动（晃动）动画效果

解析Vue.js中的组件

jQuery中关于ScrollableGridPlugin.js（固定表头）插件的使用逐步解析

vue.js移动端tab组件的封装实践实例

Vue中的基础过渡动画及实现原理解析

深入理解Vue.js轻量高效的前端组件化方案

Vue.js子组件向父组件通信的方法实例代码详解

解析PDU在机房管理中的作用

详解vuex 中的 state 在组件中如何监听

JAVA中4种解析XML文件的方法

vue组件中的data为什么是函数？

Mybatis中的动态SQL语句解析