6.Vue组件

最新推荐文章于 2023-04-14 11:12:04 发布

陆源东

最新推荐文章于 2023-04-14 11:12:04 发布

阅读量86

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/m0_53509974/article/details/118932520

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

6.Vue组件

组件是可复用的Vue实例 ，一组可重复的模板

组件简单编写

<body>
  <div id="component">
    <!--Vue组件必须位于Vue实例中-->
    <luyuandong></luyuandong>
  </div>
<script>
   //定义一个Vue组件，名字为luyuandong
    Vue.component('luyuandong',{ 
    template: '<div>Hello</div>>'  //组件中定义的模板
  })
   //创建一个Vue实例并绑定对应的视图 ，Vue组件必须位于Vue实例中
  new Vue({ 
    el : '#component' 
  })
</script>
</body>

组件遍历

<body>
<div id="app">
    <!--组件利用v-for进行循环 v-bind进行数据的绑定，将item绑定到it-->
  <luyuandong v-for="item in items" v-bind:it="item"></luyuandong>
</div>
<script>
  Vue.component("luyuandong",{
    props : ['it'],
    template : '<li>{{it}}</li>>' //直接对绑定到的it进行输出
  })
  new Vue({
    el : "#app",
    data : {
      items: ["高数","概率论","数值分析","摆烂"]
    }
  })
</script>
</body>

Vue实例数据绑定到Vue组件的过程

Vue实例的数据通过v-for以item的形式表现出来
在模板中通过v-bind将item绑定到content中
在组件中通过props参数将 content传入组件
在模板中 将传入的参数输出

单项数据的绑定同理

<body>
<div id="app">
    <luyuandong  v-bind:content="message"></luyuandong>
</div>
<script>
  Vue.component('luyuandong',{
    props : ['content'],
    template : '<li>{{content}}</li> '
  })
  new Vue({
    el : "#app",
    data : {
      message : "摆烂"
    }
  })
</script>
</body>

陆源东

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6.Vue组件

6.Vue组件组件是可复用的Vue实例，一组可重复的模板组件简单编写<body> <div id="component">  <luyuandong></luyuandong> </div><script> //定义一个Vue组件，名字为luyuandong Vue.component('luyuandong',{ te
复制链接

扫一扫

专栏目录