网易网站建设的目的,制作公众号的软件,网站建设销售好做么,内蒙古建设工程造价信息网官网中项网vue学习笔记-03-浅谈组件-概念#xff0c;入门#xff0c;如何用props给组件传值#xff1f; 文章目录vue学习笔记-03-浅谈组件-概念#xff0c;入门#xff0c;如何用props给组件传值#xff1f;什么是组件#xff1f;为什么要使用组件#xff1f;如何使用组件呢…vue学习笔记-03-浅谈组件-概念入门如何用props给组件传值 文章目录vue学习笔记-03-浅谈组件-概念入门如何用props给组件传值什么是组件为什么要使用组件如何使用组件呢hello组件如何给组件里面传递参数呢组件的注册分为全局注册和局部注册思考一下如果是多个属性传入组件呢什么是组件 组件是可复用的 Vue 实例说白了就是一组可以重复使用的模板跟 JSTL 的自定义标签、Thymeleaf 的 th:fragment等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织 为什么要使用组件 你可以将组件进行任意次数的复用减少代码量提高代码的重用性比如侧边栏搜索框之类的。 组件系统是Vue.js其中一个重要的概念它提供了一种抽象让我们可以使用独立可复用的小组件来构建大型应用任意类型的应用界面都可以抽象为一个组件树。
如何使用组件呢 vue.js官网讲解组件
下面我们一起来看看怎么初步使用它吧
hello组件 script typetext/javascript// 先注册组件Vue.component(my-component-li, {template: liHello li/li});// 再实例化 Vuevar vm new Vue({el: #vue});/scriptdiv idvueul!--使用自定义的组件--my-component-li/my-component-li/ul/divVue.component()注册组件my-component-li自定义组件的名字template组件的模板
如何给组件里面传递参数呢 向上面那种一点用都没有223因为没有参数传进去意义性不大如果需要传递参数进去则需要props属性了 psprops里面的属性值不能大写 script typetext/javascript// 先注册组件Vue.component(my-component-li, {props: [item],template: liHello {{item}}/li});// 再实例化 Vuevar vm new Vue({el: #vue,data: {items: [张三, 李四, 王五]}});/scriptdiv idvueulmy-component-li v-foritem in items v-bind:itemitem/my-component-li/ul/div
说明
v-for“item in items”遍历 Vue 实例中定义的名为 items 的数组并创建同等数量的组件v-bind:item“item”将遍历的 item 项绑定到组件中 props 定义的名为 item 属性上 号左边的 item 为 props 定义的属性名右边的为 item in items 中遍历的 item 项的值可以这么理解数据的流向是先从data种items流向了v-for中的item然后再由item流向了props中的item。
组件的注册分为全局注册和局部注册
全局注册:
Vue.component(my-component-name, {// ... options ...})全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例也包括其组件树中的所有子组件的模板中。 到目前为止关于组件注册你需要了解的就这些了如果你阅读完本页内容并掌握了它的内容我们会推荐你再回来把组件注册读完。
思考一下如果是多个属性传入组件呢
比如 new Vue({el: #blog-post-demo,data: {posts: [{ id: 1, title: My journey with Vue },{ id: 2, title: Blogging with Vue },{ id: 3, title: Why Vue is so fun }]}})这个时候怎么动态绑定呢 blog-postv-forpost in postsv-bind:keypost.idv-bind:titlepost.title/blog-post如上所示你会发现我们可以使用 v-bind 来动态传递 prop。这在你一开始不清楚要渲染的具体内容比如从一个 API 获取博文列表的时候是非常有用的。 到目前为止关于 prop 你需要了解的大概就这些了如果你阅读完本页内容并掌握了它的内容我们会推荐你再回来把 prop 读完。
