Vue-TodoList（组件化改造）

最新推荐文章于 2024-05-09 00:58:15 发布

是Ryan吖

最新推荐文章于 2024-05-09 00:58:15 发布

阅读量328

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_45497246/article/details/104931019

版权

本文详细介绍了Vue组件的基本概念，包括组件作为可复用代码块的特点，以及如何注册和使用全局及局部组件。重点讲解了如何在组件中传递数据，并利用v-bind指令在模板中渲染组件。

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

1. Vue组件是什么

组件（Component）是 Vue.js 最强大的功能之一
组件可以扩展 HTML 元素，封装可重用的代码，可以将组件看作自定义的HTML元素
组件系统让我们可以用独立可复用的小组件来构建大型应用

2. 如何使用全局组件

（1）在script标签里注册全局组件
（2) 在html文本里创建组件实例
（3）修改组件的定义，使之能够接受一个 prop
（4）组件实例使用 v-bind 指令，将数据传到循环输出的每个组件中
（5）组件模板用插值表达式进行引用渲染
（html里的组件标签，最终会被定义好的组件里的模板内容替换掉）

<body>
    <div id="todo">
        <input type="text" v-model="inputValue">
        <button v-on:click="handleClickBtn">commit</button>
        
        <!-- 2.在模板里使用组件todo-item -->
        <!-- （1）通过list决定循环输出多少个todo-item组件
             （2）同时把每一个list项的内容（item)通过v-bind绑定到content变量，传给todo-item组件 -->
        <todo-item v

最低0.47元/天解锁文章

是Ryan吖

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue-TodoList（组件化改造）

1. Vue组件是什么组件（Component）是 Vue.js 最强大的功能之一组件可以扩展 HTML 元素，封装可重用的代码，可以将组件看作自定义的HTML元素组件系统让我们可以用独立可复用的小组件来构建大型应用2. 如何使用组件（1）...
复制链接

扫一扫

专栏目录