<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<!--
注意; 每一个vue实例都是一个组件 每一个组件也都是一个vue实例
父子组件之间带的通信：
父组件传递数据给子组件： 通过属性绑定，并且子组件需要使用props接收
子组件给父组件传递数据： 必须基于发布订阅模式，子组件需要先向外发布，父组件负责监听
-->
<div id="app">
<div>
<input type="text" v-model="inputValue">
<button @click="handleSubmit">提交</button>
</div>
<ul>
<!--
使用全局组件
父组件给子组件传递参数的过程：
1、在父组件的子组件上使用属性绑定 绑定需要传递的参数
2、在子组件中使用props接受父组件的参数
-->
<todo-item
v-for='(item,index) of list'
:key="index"
:item="item"
:index="index"
@delete="deleteItem">
</todo-item>
</ul>
</div>
<script type="text/javascript">
//全局组件注册
Vue.component('todo-item',{
//子组件要先接受父组件的参数
props:['item','index'],
template:"<li @click='handleClick'>{{item}}</li>",
// 注意; 在组件中 data必须是一个function
data:function(){
return {
}
},
methods:{
handleClick:function(){
//子组件需要将点击的li对应的index传递给父组件 子组件传参个父组件 使用发布订阅模式
this.$emit('delete',this.index);
}
}
})
//注册一个局部组件
// var todoItem = {
// template:'<li>item</l1>'
// }
var app = new Vue({
el:'#app',
data:{
inputValue:'',
list:[]
},
// components:{
// 'todo-item':todoItem
// },
methods:{
handleSubmit:function(){
//将文本框的内容添加到list中
this.list.push( this.inputValue );
this.inputValue = '';
},
deleteItem:function(index){
this.list.splice(index,1);
}
}
})
</script>
</body>
</html>
1268
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
