vue 组件传值todolist实战

最新推荐文章于 2022-03-30 15:12:44 发布

weixin79893765432...

最新推荐文章于 2022-03-30 15:12:44 发布

阅读量263

点赞数

分类专栏： # Vue.js

本文链接：https://blog.csdn.net/mChales_Liu/article/details/104619647

版权

Vue.js 专栏收录该内容

52 篇文章 9 订阅

订阅专栏

一、组件

1、全局组件

Vue.component = ("TodoItem", {
    template:"<li>todo item</li>",
})

不需要注册，直接使用。

2、局部组件

var TodoList = {
    template:"<li>todo list</li>",
}

需要注册才能使用：

var app = new Vue({
    el:"#app",
    components:{
        TodoList
    },
});

二、组件传值

以局部组件为例，全局组件原理一样。

1、父组件向子组件传值

// html 中
<div id="app">
    <todo-list :content="item"></todo-list>
</div>

// JavaScript 中
var TodoList = {
    props:['content'],
    template:"<li>{{content}}</li>"
}
var app = new Vue({
    el:"#app",
    components:{
        TodoList
    },
    data:{
        item: "hello world"
    },
})

2、子组件向父组件传值

// html 中
<div id="app">
    <todo-list @log-click="handleLogClick"></todo-list>
</div>

// JavaScript 中
var TodoList = {
    template:"<li @click='handleItemClick'>hello world</li>",
    data: function(){
        return {
            name: "marry"
        }
    },
    methods:{
        handleItemClick(){ 
            this.$emit("log-click", this.name);
        }
    }                               
}
var app = new Vue({
    el:"#app",
    components:{
        TodoList
    },
    methods: { 
        handleLogClick(name){
            console.log(name);
        }
    },
})

3、同级别组件之间的传值

三、实战：todoList 功能

vue版：


    <div id="app">
        <div>
            <input type="text" v-model="inputValue"  @keyup.enter="handleBtnClick">
            <button @click="handleBtnClick">提交</button>
        </div>
        <div>
            <ul>
                <h2>正在进行</h2>
                <todo-list 
                v-for="(item, idx) in list" :key="idx" 
                :content="item" :index="idx"
                @delete="handleItemDelete"></todo-list>
            </ul>
            <ul>
                <h2>执行完成</h2>
                <todo-list 
                v-for="item in finishList" :key="item"
                :content="item"></todo-list>
            </ul>
        </div>
        
    </div>
    <script>
        /**
        * 将用户输入添加至待办项
        * 勾选待办项至已完成列表
        **/
        var TodoList = {
            props:['content', 'index'],
            template:"<li @click='handleItemClick'>{{content}}</li>",
            methods:{
                handleItemClick(){
                    this.$emit("delete", this.index, this.content);
                }
            }
        }
        var app = new Vue({
            el:"#app",
            components:{
                TodoList
            },
            data:{
                inputValue: '',
                list:[],
                finishList:[]
            },
            methods: {
                handleBtnClick(){
                    if(this.inputValue){
                        this.list.push(this.inputValue);
                        this.inputValue = "";
                    }
                },
                handleItemDelete(index, content){               
                    this.list.splice(index, 1);
                    this.finishList.push(content);
                }
            },
        });
    </script>

下面是 JavaScript 版：

<div id="app">
    <div class="top">
        <h1 class="title">todoList功能</h1>
        <input class="inp" type="text">
        <button type="submit" id="addbtn" @click="submit">提交</button>
    </div>
    <div class="main">
        <div class="ing_box">
            <h2 class="h2">正在进行</h2>
            <ul class="doing"></ul>
        </div>
        <div class="ed_box">
            <h2 class="h2">已完成</h2>
            <ul class="finish"></ul>
        </div>
    </div>
</div>
<script>
    /**
    * 将用户输入添加至待办项
    * 勾选待办项至已完成列表
    * todolist的每一项可删除和编辑
    **/
    var inp = document.querySelector('.inp');
    var doingList = document.querySelector('.doing');
    var finishList = document.querySelector('.finish');
    var addBtn = document.getElementById("addbtn");
    
    addBtn.onclick = function(){
        if(inp.value){
            addList();
        }
    }
    // 将用户输入添加至待办项
    function addList(){
        var checkInp = document.createElement("input");// 创建checkbox勾选元素
        checkInp.setAttribute("type", "checkbox");
        checkInp.classList.add("checkdom");// 添加类名
        var div = document.createElement("div");
        div.classList.add("text");
        var value = document.createTextNode(inp.value); //文本框的输出值
        div.appendChild(value);
        var btn = document.createElement("button");// 创建删除按钮
        btn.classList.add("del_btn");
        var li = document.createElement("li");// 创建li
        li.classList.add("hang");

        li.appendChild(checkInp)//li元素中添加checkbox勾选元素
        li.appendChild(div);//li元素中添加输入的value值
        li.appendChild(btn);//li元素中添加删除按钮
        inp.value = '';//清空input输入框的内容
        doingList.appendChild(li);//ol后面添加子节点li元素

        btn.addEventListener('click', removeList);//监听事件方法绑定
        checkInp.addEventListener('click', checkboxClick);
        li.addEventListener('dblclick', updateText)
    }
    // 点击删除按钮删除当前行信息
    function removeList(e){
        var currLi = e.target.parentNode;// 点击的li
        if(e.target.parentNode.parentNode.className == "doing"){
            doingList.removeChild(currLi);
        }else if(e.target.parentNode.parentNode.className == "finish"){
            finishList.removeChild(currLi);
        }
    }
    // 点击选择框，将当前行信息移动到“已完成”列表里
    function checkboxClick(e){
        var li = e.target.parentNode;
        li.classList.add('disabled');
        finishList.appendChild(li);
    }
    // 双击li编辑文本
    function updateText(e){
        var textInp = document.createElement("input");// 创建一个输入框（默认是text类型）
        textInp.classList.add("text_input");
        var li = e.target;
        li.appendChild(textInp);// 添加到li上
        // 回车更新文本
        document.onkeydown = function(ev){
            if(ev.keyCode == 13){
                var div = li.querySelector('div');
                div.innerHTML = textInp.value;
                textInp.value = "";
            }
        }
        // 失焦删除
        textInp.onblur = function(){
            li.removeChild(textInp);
        }
    }
</script>

与JavaScript版对比，Vue实现的更简单，更优雅。他们有明显的差别：