Наличие локального CSS в Vue при создании компонента с помощью Vue.расширять({})

Наличие локального CSS в Vue при создании компонента с помощью Vue.расширять({})

28.01.2020 08:05:38 Просмотров 20 Источник

var myComponent= Vue.extend({
    template:
    `
    <div class="container">
    </div>
    `
    ,
    props: [],
    components: {}
    ,
    data() {
        return {
        }
    },

    methods: {
    }
})



У меня есть компонент выше, который создается с помощью Vue.расширять. Он принимает данные, методы и другие вещи, которые все локально ограничены. Мне интересно, могу ли я иметь CSS, который локально ограничен этим компонентом в объекте, переданном vue.расширять()

Я не использую nodejs (используя django), поэтому я не думаю, что могу использовать рекомендуемый синтаксис внутри .элементы vue (если я ошибаюсь и могу использовать .Vue файлы и синтаксис ниже, пожалуйста, дайте мне знать):

<style scoped>
/* local styles */
</style>
У вопроса есть решение - Посмотреть?

Ответы - Наличие локального CSS в Vue при создании компонента с помощью Vue.расширять({}) / Having locally scoped CSS in Vue when creating a component using Vue.extend({})

Является ответом!
Ferkze

28.01.2020 09:55:45

Вы можете включить это в свойстве строки шаблона:

template: `
    <div class="container">

        ...

        <style scoped> 
            /*your css*/
        </style>

    </div>
    `

Этот тег стиля прикрепит все css к родительскому элементу контейнера как корневой, поэтому он не повлияет на весь документ.

Закрыть X