使用Vue.extend（{}）创建组件时，在Vue中具有本地范围的CSS

Question

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

    methods: {
    }
})

我上面有一个使用Vue.extend创建的组件。它接受所有在本地范围内的数据，方法和其他内容。我想知道是否可以在传递给vue.extend（）的对象中使CSS局部限定于此组件。

我没有使用nodejs（使用django），所以我认为我不能在.vue元素中使用推荐的语法（如果我记错了，我可以使用.vue文件，请使用以下语法，请告诉我）：

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

Answer 1

您可以在模板字符串属性中添加它：

template: `
    <div class="container">

        ...

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

    </div>
    `

此样式标签将所有css作为根附加到父容器元素，因此不会影响整个文档。