Локальная область действия CSS в Vue при создании компонента с использованием Vue .extend ({}) - PullRequest
Новая
       12

Локальная область действия CSS в Vue при создании компонента с использованием Vue .extend ({})

1 голос
/ 28 января 2020 

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

    methods: {
    }
})

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

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

<style scoped>
/* local styles */
</style>

1 Ответ

1 голос
/ 28 января 2020

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

template: `
    <div class="container">

        ...

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

    </div>
    `

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

...