Vue.js 如何在v-for语句下获取组件中的其他根数据？

我也想访问模板中的添加字符串，但它似乎不起作用。 请帮我解决这里的问题

Vue.component('comp',{
    template:`
        <div id="test">
            <div v-for="(item,index) in this.$root.items">
                <p>{{this.$root.string}}</p>
                <p>{{item}}</p>
            </div>
        </div>
    `
})

var vm = new Vue({
    el:'#test',
    data:function(){
        return {
            'string':'xxx',
            'items':['a','b','c']
        }
    }
})

Vue.comp组件（'comp'{
模板：`
{{this.$root.string}

{{item}}

`
})
var vm=新的Vue({
el:'测试'，
数据：函数（）{
返回{
'字符串'：'xxx'，
'items'：['a'，'b'，'c']
}
}
})

---

将

此。$root.items

更改为

$root.items
当您在组件的模板中时，不必使用
此作为前缀。

因此，您只需将
this.$root.items
替换为
$root.items
，将
this.$root.string
替换为
$root.string

但是，如果要引用
Vue
对象中的值，则需要使用
this.
作为前缀

示例：

computed: {     
    exampleComputed: function () {
        return this.string;
     }
}

更正后的JSIDLE:
如果其中一个答案解决了您的问题，请向上投票并批准，以供未来读者参考。