コンポーネントは、Vue.js の最も強力な機能の 1 つです。コンポーネントは 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: '#app',
data: {
domain: 'Tutsplus'
},
template: '<p>Welcome to {{ domain }}</p>
});
</script>
</body>
</html>上では、コード内にコンポーネントを持たない単純な Vue インスタンスを作成しました。 さて、ウェルカム メッセージを 2 回表示したい場合は、どうすればよいでしょうか?
あなたの推測は、Vue インスタンスがマウントされている場所に p を 2 回出現させることかもしれません。 これではうまくいきません。 ID からクラスに変更してみると、次のようになります:
<!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: '.app',
data: {
domain: 'Tutsplus'
},
template: '<p>Welcome to {{ domain }}</p>
});
</script>
</body>
</html>それでも動作しません!
この問題を解決する唯一の方法は、コンポーネントを作成することです。 コンポーネントはどのように作成しますか?
コンポーネントは、Vue.component() コンストラクターを使用して作成されます。 このコンストラクターは、コンポーネントの名前 (タグ名とも呼ばれます) とコンポーネントのオプションを含むオブジェクトの 2 つのパラメーターを取ります。 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>
VueJs Components <welcome-message></welcome-message> <welcome-message></welcome-message> <welcome-message></welcome-message> <welcome-message></welcome-message>
<script> Vue.component(&#39;welcome-message&#39;, { data: function() { return { domain: &#39;Tutsplus&#39; } }, template: &#39;<p>Welcome to {{ domain }}</p>&#39; }) // A new Vue instance is created and mounted to your p element new Vue({ el: '#app' }); </script>
welcome-message と呼ばれています。 コンポーネントには任意の名前を付けることができます。 ただし重要なのは、この名前をオーバーライドしないため、この名前は 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>
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 p element
new Vue({
el: '#app'
});
</script>
</body>
</html><welcome-message></welcome-message> のように呼び出されます。 テンプレートを複数回出力するには、以下に示すように、必要なだけコンポーネントを呼び出すことができます。 <!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('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 p element
new Vue({
el: '#app'
});
</script>
</body>
</html>rreee
上で何が起こったのかわかりますか? 2 つのコンポーネントがあり、データはオブジェクトとして返されないため、両方のコンポーネントは同じデータ ソースを共有します。 私が正しいことをどうやって証明しますか？ ブラウザから上記のページを表示すると、1 つのコンポーネントの変更により、別のコンポーネントのデータが変更されることがわかります。それでは、どのように見えるべきでしょうか? 次のように:npm install -g vue-cli
vue init webpack vue-component-app
cd vue-component-app npm install npm run dev
#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: '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>要注册一个组件，可以导入它，然后使用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>
<p id= "app" >
<display-name/>
</p>
</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>
<p class="hello">
<p>This component is imported locally.</p>
</p>
</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>
<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 './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 でのコンポーネントとその機能の使用方法を詳しく説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
