组件 组件Data 组件的传值 组件传值案例

组件是可复用的 Vue 实例，且带有一个名字
示例：

//局部组件 在Vue实例中

在Vue实例中data写法是

new Vue({
el:'#app',
data:{
message:''
}
})
但是在组件中data必须是一个函数，data中的值还要return

Vue.component('my-component',{
data:function(){
return{
name:'123'
}
}
})
组件传值（父子间传值） 谁在谁中显示，显示的元素就是父元素，传值用props:['']

Vue.component('father',{
template:

这是父元素

点击

,
data:function(){
return{
num:1
}
},
methods:{
jia:function(){
this.num++
}
}
})

Vue.component('child',{
    props:['number'],
    template:
    //a标签不能直接获取num的值，显示在父元素中的子元素绑定了子元素中的number元素=num
    `
        

            
这是子元素
            {{number}}
        
    `
})

new Vue({
    el:'#app'
})

body：

js: