vue コンポーネントの役割の簡単な分析 (スコープ指定)

この記事では、vue に関する関連知識を提供します。主にスコープ属性に関連する問題を紹介します。スタイルにスコープ属性を追加すると、このコンポーネントのラベルに追加されます。最後にランダムに生成されたデータ v から始まる属性を見てください。皆さんのお役に立てれば幸いです。

[関連する推奨事項: javascript ビデオ チュートリアル、vue.js チュートリアル]

vue コンポーネント スコープ機能

目的: 同じスタイル名を持つ複数のコンポーネントの競合問題を解決します

要件: p タグ名セレクター、背景色の設定

問題: コンポーネント内の p と外側の p の両方が有効であることがわかります

解決策:Panel.vue コンポーネントの style タグにスコープ付き属性を追加します

<style></style>

// style 添加 scoped 属性后，可以实现样式独立作用域<style>p{
    background-color: pink;}</style>

スコープ付き属性を追加しますスタイルに追加すると、data-v で始まるランダムに生成された属性がこのコンポーネント

のラベルに追加されます。このカスタム属性を持ち、このスタイルの影響を受けるには、現在のコンポーネントの要素である必要があります。

概要: スタイルにスコープを追加すると、コンポーネント内のスタイルは現在の vue コンポーネントでのみ有効になります

ミッションとスコープの役割

これは vue で作成したデモです。2 つのページがあります。1 つのページはナゲッツの a タグ、もう 1 つのページは vue の a タグです。スコープの役割を確認し、ページの 1 つに a タグを付けます。赤色を追加し、もう 1 つはスタイルを追加せず、以下に示すようにスタイルでスコープを使用しません。

#誰もが答えを知っているはずです、はい!両方のページのリンク テキストが赤になります。juejin ページをクリックすると、ブラウザは現在のページのスタイルを自動的に導入します。github を再度クリックすると、ブラウザはこのスタイルを再利用するため、リンクの色は赤になります。 Vue は単一ページのアプリケーションなので、開いたすべてのページのスタイルはグローバル スタイルに挟まれます。解決策はスコープを追加することです。このとき、a タグの色は異なります。ページを開いて次の a タグを見てみましょう (下の図)

現時点では、a タグには追加の data-v-xxxxxxx が含まれています。上記のように、Vue がこのプロジェクトをビルドすると、コンポーネント ユニットを使用するように通知されます。異なるコンポーネントの下にあるすべての要素は同じコンポーネント ID で追加され、同時に属性セレクターがこの一意の識別子を結合した後、それを確認してみましょう (下の図)

はい、スコープを追加すると、Vue が追加されます。このスタイル この属性を最後の段落に追加し、属性セレクターで要素を選択して要素スタイルを分離します。次に、scoped

#今回は、scoped の副作用を検証するために element-ui を導入します。これがデモです (下図)。ここでも Scoped が使用されています。

があることに注意してください。ここには入力要素はありません。たとえば、data-v- xxxxxx の一意の識別子は

です。しかし、自分たちで作成したスタイル (my-Txt 入力) は構築後にどのように見えるでしょうか? (下の図)

<style>
.my-Txt {
  width: 200px;
}
.my-Txt ::v-deep input {
  background-color: pink;
}
</style>

##

この一意の識別子が入力の後ろから my-Txt の後ろまで続いていることがわかります。つまり、this::v-deep を追加しない場合、Vue は常にこの一意の識別子を最後の段落で、この一意の識別子の位置を変更したい場合は、スタイル貫通で指定する必要があります。すると、上の図は、この一意の識別子を持つ my-Txt 要素が上の図からわかるように、このスタイルと、私たちが作成した my-Txt にもこの一意の識別子があります。

【関連する推奨事項: JavaScript ビデオ チュートリアル 、vue.js チュートリアル ]

以上がvue コンポーネントの役割の簡単な分析 (スコープ指定)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。