Vue组件拆分
对TODOList的组件进行拆分
效果
和TODOList展示效果一致
代码
将列表li元素拆分成Vue组件，挂载到根组件上，其他不变，注意父子组件通信是通过父组件中v-bind绑定属性值然后子组件的props中接收参数，还用到了v-bind实现属性的变量绑定，v-for中的index值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lesson 4</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// mvvm , vue 实例，vue 组件
const app = Vue.createApp({
data() {
return {
inputValue: '',
list: []
}
},
methods: {
handleAddItem() {
this.list.push(this.inputValue);
this.inputValue = '';
}
},
template: `
<div>
<input v-model="inputValue" />
<button
v-on:click="handleAddItem"
v-bind:title="inputValue"
>
增加
</button>
<ul>
<todo-item
v-for="(item, index) of list"
v-bind:content="item"
v-bind:index="index"
/>
</ul>
</div>
`
});
app.component('todo-item', {
props: ['content', 'index'],
template: '<li>{{index}} -- {{content}}</li>'
});
app.mount('#root');
</script>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
