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## の副作用

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

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

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

#上の図に示すように、自分たちで書いたスタイルはこの一意の識別子でつなぎ合わされているため、どのように操作しても、この要素をヒットできません。つまり、Vue はこのロゴをこの入力に追加しませんでしたが、このロゴをスタイルに追加しました。ただし、スコープを削除するとターゲットにヒットできますが、これはお勧めしません。スタイル統一されたスタイルにパッケージ化されます。これはスコープ付きの副作用です。では、どうすれば解決できますか?スタイルの浸透

<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 サイトの他の関連記事を参照してください。