web-dev-qa-db-ja.com

コンポーネントを登録するときにvue.jsコンポーネントのcssスタイルを定義する方法は？

でカスタムvue.jsコンポーネントを登録できます

// register
Vue.component('my-component', {
  template: '<div class="my-class">A custom component!</div>'
})

https://vuejs.org/v2/guide/components.html も参照してください

コンポーネントにcssクラスを含めるにはどうすればよいですか？

私は何かを期待するでしょう

 Vue.component('my-component', {
      template: '<div class="my-class">A custom component!</div>',
      css: '#... my css stylesheet...'
    })

しかし、cssオプションがないようです。

私はできることを知っています

a）グローバルcssスタイルシートですべてのcssクラスを定義する、または

b）singe-file-vue-componentsを使用します（* .vueファイルをサポートするビルドツールが必要になります。 https://vuejs.org/v2/guide/single-file-components.html を参照してください）

しかし、私はしたい

c）コンポーネントを登録するときに、コンポーネントのcssスタイルシートを指定します。

=>その方法は？

javascriptcssvue.jsstylesheetvue-component
8
Stefan

cSSオプションがないようです。

それは正しいです。あなたが説明することはできません。 単一ファイルコンポーネントに関するドキュメント は、利点の1つはコンポーネントで実行でき、コンポーネントなしでは実行できないことです。

多くのVueプロジェクトでは、_Vue.component_を使用してグローバルコンポーネントを定義し、その後にnew Vue({ el: '#container' })を使用して、すべてのページの本文のコンテナー要素をターゲットにします。

これは、JavaScriptが特定のビューを強化するためにのみ使用される、中小規模のプロジェクトに非常にうまく機能します。ただし、より複雑なプロジェクトでは、またはフロントエンドが完全にJavaScriptで駆動されている場合、次の欠点が明らかになります。

[...]CSSサポートなしは、HTMLとJavaScriptがコンポーネントにモジュール化されている一方で、CSSが著しく省略されていることを意味します

6
Roy J

Vueテンプレート内に<style>を追加したり、コンポーネント内にCSSを直接​​追加したりすることはできません。ただし、バインドするか、CSSをグローバルに定義する必要があります。ただし、カスタムコンポーネントを作成して、動的に行います sample

4
ken

Vueコンポーネントは効果的なマクロであることを覚えておいてください。

ここで、renderは置換関数であり、vueDefinition（defn3以下）は、指定されたclassのtagNameです。

templateは便利なsyntactic-sugarの省略形であり、compiledになります（いくつかのvue-usageパターンを使用）制限）独自のrender関数を提供しない場合、render関数に変換します。

const defn3 = {
  tagName: 'ae-css',
  mounted() {
    const vueDefinition = this.$options;
    this.$el.appendChild(document.createTextNode(vueDefinition.css));
  },
  css: `
    * {
      color: blue;
    }
  `,
  render(h) {
    return h('style');
  }
}
Vue.component(defn3.tagName, defn3);

そのsolutionを手元に置いて、私が提供したものほど単純化したくないと思う理由はたくさんあります。

つまり、意図しないページのどの側面にも影響を及ぼさないようにcssmodularizedにしたいとします。そのためには、慎重に設計されたcssルールと、意図した継承とスコープが必要です。おそらくclass=..。しかし、より良いアプローチは、同様の機能を自動的に提供するVueの機能を使用することです。

このために最新のブラウザーアーキテクチャ機能を使用する場合は、コンポーネントをshadowDOMを使用し、内部要素とスタイルをカプセル化したままにする実際のブラウザーDOM WebComponentsにすることができます。 shadowRoot内。 Vueでそれを行うには this library を参照してください。

1
smallscript

ここにパキスタンからの答えがあります:)

export const ContactUs = Vue.component(
'mycomponent-contact-us'
,{
    props: {
        backgroundColor: {
            type: String
            ,required: false
            ,default: "red"
        }
    }
    ,data: function(){
        return {

        }
    }
    ,template: `
        <div>
            <span class='contact_us_text' >Contact Us Component and its bg color will be {{backgroundColor}}</span>
        </div>
    `
    ,mounted: function(){
        var css_text = `
        .contact_us_text{
            color: `+this.backgroundColor+`;
        }
        `;
        var css = document.createElement('style');
        css.type='text/css';
        css.setAttributeNode( document.createAttribute('scopped') );
        css.appendChild(    document.createTextNode( css_text )     );
        this.$el.appendChild(   css     );
    }
}

）;

0
Talha

テンプレートのルート要素内にスタイルタグを埋め込むことができます。

Vue.component('my-component', {
      template: `
      <div class="my-class">
            A custom component!

            <style>
                  // ... my css stylesheet...
            </style>
      </div>
      `
})
0
Ferkze