我读了一篇关于Renderless Components的文章，它通过 $scopedSlots 属性将一个组件拆分为一个展示组件（视图部分）和一个无渲染组件（逻辑部分）。这是一个简单的标签组件。当您按 enter 时，您将添加一个新标签
<!DOCTYPE html>
<html>
<head>
<script src="http://vuejs.org/js/vue.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="app">
<custom-component v-model="tags">
<div slot-scope="{tags,addTag,newTag}">
<span v-for="tag in tags">
{{tag}}
</span>
<input type="text" @keydown.enter.prevent="addTag" v-model="newTag">
</div>
</custom-component>
</div>
<script>
Vue.component('custom-component',{
props:['value'],
data(){
return {
newTag:''
}
},
methods:{
addTag(){
this.$emit('input',[...this.value,this.newTag])
this.newTag = ''
}
},
render(h){
return this.$scopedSlots.default({
tags:this.value,
addTag:this.addTag,
newTag:this.newTag
})
}
})
new Vue({
el:'#app',
data:{
tags:[
'Test',
'Design'
]
}
})
</script> …我想知道为什么我更改了数组的特定项目并且页面没有更新。我知道 vue.js 的文档指出：
由于 JavaScript 的限制，Vue 无法检测到数组的以下更改：
当您直接使用索引设置项目时，例如
vm.items[indexOfItem] = newValue.
它说我们应该这样做，但我不知道为什么。我发现了一个类似的问题（Vue 计算问题 - 什么时候会再次计算）。
这是上面问题中的一些代码：
// works well
data() {
return {
cart: {
item: {
nums: 10,
price: 10,
},
},
}
},
computed: {
total() {
return this.cart.item.nums * this.cart.item.price
},
},
methods: {
set() {
//why it worked.
this.cart.item = {
nums: 5,
price: 5,
}
},
},
// oops! not working!
data() {
return {
cart: [
{
nums: 10,
price: 10, …这是基本类 Person 和子类 Student
class Person {
constructor(private name:string){}
}
class Student extends Person {
greet(){
console.log('Hi, I'm ' + this.name)
}
}
我收到错误：
属性“name”是私有的，只能在“Person”类中访问。
根据有关自动构造函数的文档
在派生类中，自动构造函数具有与基类构造函数相同的参数列表（可能还有重载）。
所以我认为 Student 类的构造函数会调用 Person 的构造函数。我的意思是这只是参考电话。所以我认为 Student 类应该有自己的属性名称
我应该怎么做才能确保类 Student 有自己的属性名称？
我只是想使用 Vue 计算，但我得到了undefined(styleObj.width)，而且似乎没有调用计算函数（没有记录“计算”）。当我更改数据而计算函数仍未被调用并且数据(styleObj.width)仍然是undefined.
代码很简单，我希望你知道我在说什么。
<!DOCTYPE html>
<html>
<head>
<script src="http://vuejs.org/js/vue.js"></script>
<meta charset="utf-8" />
<title>JS Bin</title>
<style>
#app {
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="app" :style="styleObj"></div>
<script>
var vm = new Vue({
el: '#app',
data: {
num: 100,
styleObj: {
width: this.calcWidth, // always be undefined even num has changed
},
},
computed: {
calcWidth() {
console.log('computed') // never log 'computed' which means the
// calcWidth not be called
return this.num …