Vue.js中组件的示例分析
这篇文章将为大家详细讲解有关Vue.js中组件的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
创新互联公司专业IDC数据服务器托管提供商，专业提供成都服务器托管，服务器租用，四川雅安电信机房，四川雅安电信机房，成都多线服务器托管等服务器托管服务。
什么是组件？
组件使我们能够将 复杂的 应用程序分解成小块。例如，典型的Web应用程序将具有标题，侧边栏，内容和页脚等部分。
Vue.js允许我们将每个部分分解成单独的模块化代码，称为组件。这些组件可以扩展，然后附加到 你 正在处理的应用程序。 使用 组件是 在 整个应用程序 编写 中重用代码的好方法。
假设 你 有一个博客应用程序，并且 你 想要显示 一列 博客 帖子 。使用Vue组件，你可以做：
Vue处理剩下的事情。
创建一个将Vue实例挂载到DOM元素的简单HTML页面。 你 将使用它来了解组件。以下是HTML页面 样例 ：
VueJs Components
在上面，你创建了一个简单的Vue实例，在代码中没有组件因素。 现在，如果 你 希望欢迎消息出现两次，那么 你 怎么做？
你的猜测可能是 让 div 在 Vue实例挂载的地方出现两次。 这是行不通的。 尝试改变它从 id 到 class ， 你会得到 ：
VueJs Components
它仍然不会工作！
解决这个问题的唯一方法是创建一个组件。 你如何创建一个组件？
组件是使用Vue.component（）构造函数创建的。 这个构造函数有两个参数：你的组件的名字（也可以叫做标签名）和一个包含组件选项（options）的对象。
让我们使用上面的内容创建一个组件。
Vue.component('welcome-message', {
data: function() {
return {
domain: 'Tutsplus'
}
},
template: 'Welcome to {{ domain }}
'
})在上面，组件名称被称为welcome-message。 你的组件可以有你选择的任何名称。 然而重要的是，这个名字不会影响任何HTML标签，因为你不想重写它。
传递给构造函数的options对象包含数据和模板。 在创建组件时，你的数据应该是一个函数，如上所见。 被保存的数据应该作为一个对象返回。
在没有数据可以传递的情况下，传递如下的模板：
Vue.component('welcome-message', {
template: 'Welcome to Tutsplus
'
})完成之后，可以通过使用传递给构造函数的名称将其当作常规HTML元素来在应用程序中使用组件。 它被这样调用： 。
要多次输出模板，可以根据需要多次调用组件，如下所示。
VueJs Components
这样一来，欢迎消息将显示四次。
将数据存储在组件中
上面我提到数据必须是一个函数，它所包含的信息必须作为一个对象返回。 为什么这样？
当返回的数据不是对象时，使用该数据的组件共享相同的源：共享数据。 因此，一个组件的数据变化会影响另一个组件。 当数据作为对象返回时，这是不一样的。
看看这是如何实际工作是很重要的。 首先，让我们看看数据作为对象返回的情况。
VueJs Components
你能猜到上面发生了什么吗？
有两个组件，并且这两个组件共享相同的数据源，因为数据不作为对象返回。 你怎么证明我是对的？ 当从浏览器查看上述页面时，你将看到一个组件的更改会导致另一个组件的数据发生更改。那么它应该是怎样的呢？
像这样：
VueJs Components
这里的数据是作为一个对象返回的，一个组件的改变不会影响另一个组件。 该功能是针对单个组件执行的。 在构建应用程序时，不要忘记这一点，这很重要。
创建和使用组件
使用到目前为止学到的内容，让我们使用 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
Welcome to TutsPlus {{ name }}
Change Display Name
h2, h3 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
你有欢迎文本显示欢迎消息和作为数据传递的名称。 当点击欢迎消息下方的按钮时，将调用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: '',
components: { App }
})这里除了导入你的Hello组件的那一行之外，没有什么新东西。然后使用构造函数注册该组件。最后，对于这部分，组件需要使用你输入的组件名称来显示。在这种情况下，组件是显示名称。这将在你的App.vue文件中完成。
打开src / App.vue并使其看起来像这样。
#src/App.vue
打开服务器，打开http：// localhost：8080。 点击按钮，名称应该改变。
我们来看看如何在本地使用一个组件。
在组件目录中创建一个名为Detail.vue的文件。 这个组件不会做任何特殊的事情 - 它将被用在Hello组件中。
使你的Detail.vue文件就像这样。
#src/components/Detail.vue
This component is imported locally.
h2, h3 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
要在Hello组件中使用它，可以像导入Hello组件一样将其导入。 接下来，把它注册，但这次你不需要使用Vue.component（）构造函数。
你可以使用导出内的组件对象进行注册。将用作元素标记的组件的名称必须作为值传递给对象。 完成后，你现在可以使用元素标记来输出组件。
为了理解这一点，Hello组件应该长这样：
#src/components/Hello.vue
Welcome to TutsPlus {{ name }}
Change Display Name
h2, h3 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
刷新页面以查看新页面。
范围组件样式
Vue.js允许你为组件提供全局和本地样式。是什么意思呢？在某些情况下，你希望组件中的某些元素与另一个组件中的对应元素的样式不同。Vue.js能够帮助你。
一个很好的例子是你刚刚建立的小应用程序。App.vue中的样式是全局的; 这怎么可能？ 打开你的App.vue，风格部分看起来像这样。
这与Detail.vue不同，看起来像这样。
h2, h3 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
将 scoped 添加到样式标签是造成这个差别的原因。 尝试通过删除 scoped 来编辑一种组件样式，你会看到这是如何运作的。
关于“Vue.js中组件的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
分享文章：Vue.js中组件的示例分析
网站链接：http://kswjz.com/article/gijeod.html
扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
