vue子父组件传值

最基础的字符组件传值,简单的TODOList

1、父传 子  props  也可以理解成属性值

2、 子传父  $emit

3、监听回车事件

     (1) @keyup.enter

     (2) @keydown="test"   

          test(ev){if(ev.keyCode===13)}

4、因为vue是MVVM   所以几乎全部操作数据,不操作dom

5、代码

<body>
<div id="app">
{{message}}
<input type="text" v-model="msg" placeholder="请输入信息" @keydown="enterToLogin" /><button type="button" @click=addMsg>点击</button>
<ul>
<to-item v-for="(item,index) in msgs" :conment="item" :index="index" @delete="deleteItem"></to-item>
</ul>
</div>

</body>
<script type="text/javascript" src="vue.js"></script>
<script>
//回车事件
//@keyup.enter="addMsg"


//抽出组件

//全局组件
/*Vue.component('ToItem',{
props:['conment','index'],//父像子传值 ==》props
template:'<li @click="buddleDelete">{{this.conment}}</li>',
methods:{
buddleDelete(){
this.$emit('delete',this.index)//子像父传值==》$emit
}
}
})*/



//局部组件
var toItem={
props:['conment','index'],
template:'<li>{{this.conment}}<li>',
template:'<li @click="buddleDelete">{{this.conment}}</li>',
methods:{
buddleDelete(){
this.$emit('delete',this.index)//子像父传值==》$emit
}
}
}

var vueEg=new Vue({
el:'#app',
data(){
return {
message:'hello',
msg:'',
msgs:[],
}
},
components:{//一定记住是components =》 因为是多个
toItem:toItem
},
methods:{
addMsg(){
this.msgs.push(this.msg)
this.msg=''
},
deleteItem(index){//这里的index直接就能获取到
this.msgs.splice(index,1)//在当前坐标下 删除一个元素
},
enterToLogin(ev){//利用keydown来实现回车事件
if(ev.keyCode === 13)
this.addMsg();
}
}
});
</script>

posted @ 2018-05-08 09:20  豆豆飞  阅读(238)  评论(0编辑  收藏  举报