你能猜到上面发生了什么吗？
有两个组件，并且这两个组件共享相同的数据源，因为数据不作为对象返回。你怎么证明我是对的？当从浏览器查看上述页面时，你将看到一个组件的更改会导致另一个组件的数据发生更改。那么它应该是怎样的呢？
像这样：
VueJsComponents
这里的数据是作为一个对象返回的，一个组件的改变不会影响另一个组件。该功能是针对单个组件执行的。在构建应用程序时，不要忘记这一点，这很重要。
创建和使用组件
使用到目前为止学到的内容，让我们使用vue-cli从头开始一个新的Vue.js项目来实现它。如果你的机器上没有安装vue-cli，你可以通过运行：
npminstall-gvue-cli
开始你的新的Vue.js项目：
vueinitwebpackvue-component-app
导航到你的应用程序，安装依赖关系，并使用下面的命令运行你的开发服务器。
cdvue-component-app
npminstall
npmrundev
首先，你将重命名HelloWorld组件，这个组件是你将应用程序初始化为Hello.vue时创建的组件。然后你将注册这个组件作为一个全局组件在你的应用程序中使用。
所以你的Hello组件应该看起来像这样。
#src/components/Hello.vue
WelcometoTutsPlus{{name}}
ChangeDisplayName
h1,h2{
font-weight:normal;
}
ul{
list-style-type:none;
padding:0;
}
li{
display:inline-block;
margin:010px;
}
a{
color:#42b983;
}
你有欢迎文本显示欢迎消息和作为数据传递的名称。当点击欢迎消息下方的按钮时，将调用changeName方法。名字将从亨利改为马克。
要全局使用此组件，必须被注册。你能猜到应该在哪里完成这个操作吗？如果你说main.js，恭喜你，答对了！
要注册一个组件，可以导入它，然后使用Vue.component（）构造函数进行设置。自己动手试试。
我敢打赌，这个对你来说小菜一碟。以下是main.js文件中的内容。
#src/main.js
//TheVuebuildversiontoloadwiththe`import`command
//(runtime-onlyorstandalone)hasbeensetinwebpack.base.confwithanalias.
importVuefrom'vue'
importAppfrom'./App'
importHomefrom'./components/Hello'
Vue.config.productionTip=false
Vue.component('display-name',Home)
/*eslint-disableno-new*/
newVue({
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
Thiscomponentisimportedlocally.
h1,h2{
font-weight:normal;
}
ul{
list-style-type:none;
padding:0;
}
li{
display:inline-block;
margin:010px;
}
a{
color:#42b983;
}
要在Hello组件中使用它，可以像导入Hello组件一样将其导入。接下来，把它注册，但这次你不需要使用Vue.component（）构造函数。
你可以使用导出内的组件对象进行注册。将用作元素标记的组件的名称必须作为值传递给对象。完成后，你现在可以使用元素标记来输出组件。
为了理解这一点，Hello组件应该长这样：
#src/components/Hello.vue
WelcometoTutsPlus{{name}}
ChangeDisplayName
h1,h2{
font-weight:normal;
}
ul{
list-style-type:none;
padding:0;
}
li{
display:inline-block;
margin:010px;
}
a{
color:#42b983;
}
刷新页面以查看新页面。
范围组件样式
Vue.js允许你为组件提供全局和本地样式。是什么意思呢？在某些情况下，你希望组件中的某些元素与另一个组件中的对应元素的样式不同。Vue.js能够帮助你。
一个很好的例子是你刚刚建立的小应用程序。App.vue中的样式是全局的;这怎么可能？打开你的App.vue，风格部分看起来像这样。
这与Detail.vue不同，看起来像这样。
h1,h2{
font-weight:normal;
}
ul{
list-style-type:none;
padding:0;
}
li{
display:inline-block;
margin:010px;
}
a{
color:#42b983;
}
将 scoped添加到样式标签是造成这个差别的原因。尝试通过删除 scoped来编辑一种组件样式，你会看到这是如何运作的。
结论
虽然这个文章有点长，但是我相信你会喜欢它。
现在你知道如何有效地使用组件，并且了解如何在现有应用程序中构建组件。在使用vue-cli时，你还可以在本地和全局范围内创建和使用组件。当你想为一个组件使用特定的风格时，你已经看到了如何使用scoped来做到这一点。
你现在可以继续构建使用组件的复杂Vue.js应用程序。了解Vue.js允许你重用代码，你的页眉，页脚，登录面板和搜索栏可以用作组件。
总结
以上所述是小编给大家介绍的Vue.js中的组件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。
