Vue组件

组件是可复用的 Vue 实例，

　　且带有一个名字：在这个例子中是 <testcomponent>。

　　我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

我们可以对组件进行任意次数的重复

 

 

组件里面的template是html代码   是模板

组件里面可以有data，但是这个data必须是一个函数，比如Vue官网的代码

 

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

　　我们一般用树的形式来进行对组件的组织。

　　有时候我们需要向组件里面传递数据。上面说了组件的data里面只能是函数。所以需要我们通过 Prop 向子组件传递数据

　　Prop 是你可以在组件上注册的一些自定义 属性。当一个值传递给一个 prop 属性的时候，它就变成了那个组件实例的一个 property。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中：（可以看做是标签中的自定义属性）  v-bind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
</head>
<body>
<div id="app">
    <testcomponent v-for="item in items" v-bind:test1="item"></testcomponent>

</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    //定义组件
    Vue.component("testcomponent",{
        props:['test1'],
        template:' <li>{{test1}}</li>'
    })
    var vm= new Vue({
        el: "#app",
        data: {
            items:["java","c语言","python"]
        }
    });
</script>
</body>
</html>

 

posted @ 2021-12-27 21:18  qwedfrgh  阅读(39)  评论(0)    收藏  举报