Vue.js でのコンポーネントの使用方法の詳細な説明-jsチュートリアル-php.cn

今回は、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>
 <!-- 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 つのパラメーターを取ります。

上記の内容を使ってコンポーネントを作成してみましょう。

りー

上記では、コンポーネント名は

と呼ばれています。コンポーネントには任意の名前を付けることができます。ただし重要なのは、この名前をオーバーライドしないため、この名前は HTML タグに影響を与えないことです。 welcome-message

コンストラクターに渡されるオプションオブジェクトには、データとテンプレートが含まれています。コンポーネントを作成するときは、上記のようにデータは関数である必要があります。保存されたデータはオブジェクトとして返される必要があります。

渡すデータがない場合は、次のテンプレートを渡します:

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

ログイン後にコピー

これが完了すると、コンストラクターに渡された名前を使用してコンポーネントを通常の HTML 要素として扱うことで、コンポーネントをアプリケーションで使用できるようになります。このように呼ばれます:

。 <welcome-message> </ welcome-message>

テンプレートを複数回出力するには、以下に示すように、必要なだけコンポーネントを呼び出すことができます。

りー

その結果、ウェルカムメッセージが 4 回表示されます。

データをコンポーネントに保存する

上で、データは関数である必要があり、それに含まれる情報はオブジェクトとして返される必要があると述べました。なぜこのようになっていますか？

返されたデータがオブジェクトではない場合、データを使用するコンポーネントは同じソース、つまり共有データを共有します。したがって、あるコンポーネントでのデータ変更は別のコンポーネントに影響を与えます。これは、データがオブジェクトとして返される場合とは異なります。

これが実際にどのように機能するかを確認することが重要です。まず、データがオブジェクトとして返される場合を見てみましょう。

りー

上で何が起こっているのかわかりますか?

2 つのコンポーネントがあり、データはオブジェクトとして返されないため、両方のコンポーネントは同じデータソースを共有します。私が正しいことをどうやって証明しますか？ブラウザから上記のページを表示すると、1 つのコンポーネントの変更により、別のコンポーネントのデータが変更されることがわかります。それでは、どのように見えるべきでしょうか?

このように:

rreee

ここでのデータはオブジェクトとして返され、あるコンポーネントでの変更は別のコンポーネントに影響を与えません。この機能は単一のコンポーネントに対して実行されます。アプリケーションを構築するときにこれを忘れないことが重要です。

コンポーネントを作成して使用する

使用到目前为止学到的内容，让我们使用 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: '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>
<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允许你重用代码，你的页眉，页脚，登录面板和搜索栏可以用作组件。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！