手把手教你VUE从入门到放弃—— 篇五（组件传值）

我才是真的封不觉

于 2019-11-26 16:41:13 发布

阅读量103

点赞数

文章标签：组件传值 vue

本文链接：https://blog.csdn.net/JavaCoder_juejue/article/details/103257012

版权

不多说，直接上代码

下面的知识点包含

1.emit("事件名") 主动触发一个事件

2.@delete 等价于 v-on:click

3.v-bind: 等价于：

4.v-bind 绑定属性

5.v-for="(item,index) in list 获取列表中的每个值及其下标（从0开始）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单的组件传值</title>
    <script src="vue.js"></script>
</head>
<body>
<div id = 'app2'>
       <input type='text' v-model='inputVal'/>
       <button @click='addToList'>提交</button>
       <ul >
           <com v-bind:con1="item" v-bind:index="index" v-for="(item,index) in list"
           @delete="deleteOne" ></com>
       </ul>
   </div>
   <script>
       var com = {
           props:['con1','index'],
           template:'<li @click="itemClick">{{con1}}</li>',
           methods:{
               itemClick:function(){
                   this.$emit("delete",this.index);
               }
           }
       };
       var app = new Vue({
           el:'#app2',
           data:{
               list:[],
           inputVal : ''
           },
           components:{
               com:com
           },
           methods:{
               addToList:function(){
                   this.$data.list.push(this.inputVal);
                   this.inputVal = '';
               },
               deleteOne:function(index){
                   alert(index);
                   this.list.splice(index,1);
               }
           }
       });
   </script>
</body>

</html>

我才是真的封不觉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
手把手教你VUE从入门到放弃—— 篇五（组件传值）

不多说，直接上代码下面的知识点包含1.emit("事件名") 主动触发一个事件2.@delete 等价于v-on:click3.v-bind: 等价于：4.v-bind 绑定属性5.v-for="(item,index) in list 获取列表中的每个值及其下标（从0开始）<!DOCTYPE html><html lang="en">...
复制链接

扫一扫