vue组件实际上就是自定义标签
组件是vue可重复使用的实例
也就是说，当你定义好一个组件之后，你可以将其当做一个html的标签使用
<div id="app">
<br>
<qinjiang></qinjiang>
<br>
</div>
<div id="buttonnew">
<newbutton></newbutton>
</div>
Vue.component('qinjiang',{
template:' <span title="66">\n 鼠标悬停查看信息\n </span>',
})
Vue.component('newbutton',{
data:function (){
return{
count:0
}
},
template: '<button v-on:click="count++">you clicked me {{count}} time</button>'
})
new Vue({
el:"#buttonnew"
})
new Vue({
el:"#app"
})
结果
你可以将组件进行任意次数的复用：
注意当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。
data 必须是一个函数
当我们定义这个 <button-counter> 组件时，你可能会发现它的 data 并不是像这样直接提供一个对象：
data: {
count: 0
}
取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：
data: function () {
return {
count: 0
}
}
如果 Vue 没有这条规则，点击一个按钮就可能会像如下代码一样影响到其它所有实例
关于如何在自定义的组建中，调取已有vue对象属性值的方法
以下是代码显示
<div id="app">
<br>
<qinjiang v-for="(value,name,index) in message" v-bind:zihan="value" v-bind:name="name" v-bind:index="index"></qinjiang>
<br>
</div>
Vue.component('newbutton', {
data:function () {
return{
count: 0
}
},
template: '<button v-on:click="count +=1">you clicked me {{count}} time</button>'
})
new Vue({
el: "#app",
data:{
// items:['狗蛋','猪蛋','钢蛋']
message:{
one:'狗蛋',
two:'猪蛋',
three:'钢蛋',
}
}
})
由于刚开始学，这部分也比较绕脑，现在重新复盘一下
首先，自定义的标签必须要在已定义的vue对象中才能被识别
也就是说
当你想要使用自定义标签时，你要在一个已经被定义的vue对象中使用，在上述代码中也就是
<div id="app">以及el: "#app",
其次，从代码中可以看出，自定义标签与vue对象是平级的存在，也就是说，自定义标签无法直接调用vue对象中的属性内容，
因此，我们需要将我们想用的内容绑定到自定义标签上，然后在自定义标签内，接收绑定的数据，从而实现数据调取
以这行代码为例：
<qinjiang v-for="(value,name,index) in message" v-bind:zihan="value" v-bind:name="name" v-bind:index="index"></qinjiang>
可以看到，我们的原意是用for循环将message的内容遍历出来，因为我们的自定义标签是写在被定义vue的div中的，所以for循环可以读取到message 在从message提取到 value name index数据之后，下面我们要做的便是将这三个数据绑定在自定义标签中，也就是v-bind:zihan="value"等操作了， 将数据绑定到自定义标签之后，数据只能用props进行接收，props是一个数组，可以一次性接收很多数据， 最后将我们的数据写到template模板里，这样自定义标签就能读取到已定义vue对象中的属性了
在模板中常用的属性有
data，注意data必须是一个函数
props：用来存放被定义的数据
template：定义的模板
标签：count,vue,自定义,标签,组件,data From： https://www.cnblogs.com/-0112/p/17341667.html