使用 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 附加到您的父容器元素作为根，因此它不会影响您的整个文档。