Vue学习：使用组件改造ToDoList与组件间的传值

最新推荐文章于 2023-06-20 11:55:31 发布

Licheng Xu

最新推荐文章于 2023-06-20 11:55:31 发布

阅读量341

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_43912883/article/details/102835677

版权

本文介绍了如何使用Vue将原本的ToDoList改造为组件化，并详细讲解了组件定义、替换li标签、通过v-bind传值以及组件间的事件通信。通过定义全局和局部组件，实现列表项的动态添加与删除，展示了Vue中组件的复用性和父子组件间的数据传递。

摘要由CSDN通过智能技术生成

Vue学习：使用组件改造ToDoList与组件间的传值

一、原本的ToDoList

每一个li可以当作页面的一个部分，便可以拆开来编写，原本这里是利用v-for循环li标签来显示的，可以将li标签组件化

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="inputValue"/>
            <button v-on:click="handleBtnClick">提交</button>
            <ul>
                <li v-for="item in list">{
  {item}}</li>
            </ul>
        </div>
    </body>
    <script>
        var app = new Vue({
    
            el:'#app',
            data:{
    
                list:[],
                inputValue:''
            },
            methods:{
    
                handleBtnClick:function(){
    
                    this.list.push(this.inputValue),
                    this.inputValue=''
                }
            }
        })
    </script>
</html>

二、组件化改造ToDoList

2.1 定义全局组件

vue.component定义的是全局组件，组件名称是TodoItem，内容是li标签

        //Vue定义全局组件
        Vue.component("TodoItem",{
            template:"<li>todo item</li>"
        })

2.2 代替li标签

每点一次提交，都会多一次< li >todo item< /li >显示在页面，因为我们定义的组件名称是TodoItem，所以将大写的T和I用t和i代替，但是后面的驼峰都需要接一个-符号

            <ul>
               <!--<li v-for="item in list">{
   {item}}</li>--> 
               <todo-item v-for="item in list"></todo-item>
            </ul>