组件 ，组件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:

案例二：
效果图：