<MyTable :goodsList="goodsList">
时间: 2024-10-27 21:04:30 浏览: 17
`<MyTable :goodsList="goodsList">` 这是在Vue.js中使用单向数据绑定的一个典型例子。`MyTable` 可能是一个自定义的表格组件,`:goodsList` 是一个属性绑定。`goodsList` 是父组件传递给子组件的数据,这里的冒号(:`)表示这是一个v-bind或对象字面量形式的属性绑定。
在父组件(通常是某个Vue实例)的模板中,当`goodsList` 数据改变时,由于Vue的响应式系统,`MyTable` 组件会自动接收到新的列表并更新其显示内容,无需父组件手动通知。这样可以保持组件间的隔离,提高代码的可维护性。
举个简单的例子:
```html
<template>
<div>
<button @click="addGood">Add Good</button>
<MyTable :goodsList="displayGoodsList"/>
</div>
</template>
<script>
export default {
data() {
return {
displayGoodsList: [],
}
},
methods: {
addGood() {
this.displayGoodsList.push({name: 'New Item'});
}
}
}
</script>
```
在这里,每次点击“添加商品”按钮,`displayGoodsList` 会增加一个新元素,`MyTable` 自动刷新展示最新的商品列表。
阅读全文