<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>todolist组件之间传值</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue"/>
<button v-on:click="handleBtnClick">提交</button>
<ul>
<todo-item
:content="item"
:index="index"
v-for="(item,index) in list"
@delete="handleItemDelete">
</todo-item>
</ul>
</div>
<script>
/*--子组件-*/
var TodoItem={
props:['content','index'],
template:"<li @click='handleItemClick'>{{content}}</li>",
methods:{
handleItemClick:function(){
console.log('222')
this.$emit("delete",this.index)
console.log(this.index)
}
}
}
/*--父组件-*/
var app=new Vue({
el:'#app',
components:{
TodoItem:TodoItem
},
data:{
list:['第一','第二','第三','第四','第五'],
inputValue:"增加一条"
},
methods:{
handleBtnClick:function(){
this.list.push(this.inputValue)
this.inputValue=""
},
handleItemDelete:function(index){
console.log("444")
this.list.splice(index,1)
console.log('555')
}
}
})
</script>
</body>
</html>
注:@delete
vue零基础开发005——组件之间传值
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 可能由于vue用的还是比较少,之前都是用vuex来进行变量共享的,老是忘记,这里做个总结,方便后期查询。 父子组件...
- 1.父组件向子组件传值 父组件向子组件传值,通过属性的方式进行,子组件用props进行接收。 注意在这个传值过程中...
- 一、父传子 1、在父组件中传入子组件child3 2、传入时,使用v-bind指令绑定2个属性parameValu...