查看: 294|回复: 10

基础6 组件化 子组件传值父组件

[复制链接]
回帖奖励 10 MC币 回复本帖可获得 1 MC币奖励! 每人限 1 次(中奖概率 60%)

170

主题

178

帖子

787

积分

管理员

子枫

Rank: 9Rank: 9Rank: 9

积分
787
发表于 2020-3-24 11:34:24 | 显示全部楼层 |阅读模式
[AppleScript] 纯文本查看 复制代码
<!-- 
    组件化
    子组件传值父组件
v-on:click  ==>  @click
v-bind:content ===> :content
 -->

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 </head>
 <body>
    
     <div  id="app">
         <input type="text" v-model="inputValue" >
         <input type="button" value="提交" v-on:click="btnClick">
         <ul>
            <todo-item 
                v-for="(item,index) in list"
                :content="item" 
                :index="index"
                @delete="DelItem" 
                >
                <!-- //del-3 -->
            </todo-item>
         </ul>
     </div>
     
 </body>
 </html>
 
 <script>

     var TodoItem = {
        props:['content','index'],
        template:"<li @click='DelItem'>{{content}}</li>",  //del-1
        methods: {
            ////del-2   向上触发事件
            DelItem:function(){
                this.$emit('delete',this.index);
            }
        }
     }
     var app = new Vue({
         el:"#app",
         components:{
            TodoItem:TodoItem  //注册组件
         },
         data: {
             list: ['第一课内容','第二课内容'],
             inputValue:''
         },
         methods: {
             btnClick: function() {
                 // this.inputValue   //获取input数据
                 this.list.push(this.inputValue)
                 this.inputValue =''
             },
            //  //del-4
             DelItem:function(index){
                this.list.splice(index,1)
             }
         }
     })
 </script>

0

主题

10

帖子

6

积分

新手上路

Rank: 1

积分
6
发表于 2020-3-24 11:36:33 | 显示全部楼层
感谢
回复

使用道具 举报

0

主题

11

帖子

4

积分

新手上路

Rank: 1

积分
4
发表于 2020-3-24 11:38:55 | 显示全部楼层
论坛有你更精彩!
回复

使用道具 举报

0

主题

17

帖子

2

积分

新手上路

Rank: 1

积分
2
发表于 2020-3-24 11:48:19 | 显示全部楼层
好东西一定要看看!
回复

使用道具 举报

0

主题

22

帖子

10

积分

新手上路

Rank: 1

积分
10
发表于 2020-3-24 13:11:22 | 显示全部楼层
学习了
回复

使用道具 举报

0

主题

19

帖子

0

积分

新手上路

Rank: 1

积分
0
发表于 2020-3-24 13:14:59 | 显示全部楼层
论坛有你更精彩!
回复

使用道具 举报

0

主题

11

帖子

4

积分

新手上路

Rank: 1

积分
4
发表于 2020-3-24 13:37:57 | 显示全部楼层
感谢
回复

使用道具 举报

0

主题

19

帖子

6

积分

新手上路

Rank: 1

积分
6
发表于 2020-3-24 14:24:59 | 显示全部楼层
学习了
回复

使用道具 举报

0

主题

22

帖子

10

积分

新手上路

Rank: 1

积分
10
发表于 2020-3-24 20:13:54 | 显示全部楼层
到此一游
回复

使用道具 举报

0

主题

13

帖子

5

积分

新手上路

Rank: 1

积分
5
发表于 2020-3-24 22:28:21 | 显示全部楼层
这个网站基本天天进,还不错!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则