Vue-组件开发

Vue-组件开发

<div id="app">
  <!--引用组件时，组件名必须采用横线分隔符-->
  <component-a></component-a>
  <component-a></component-a>
  <component-b></component-b>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    // 全局注册组件
    /*
      组件名
        1、驼峰、黄线分隔符命名方式
        2、使用组件时，必须采用横线分隔符方式进行引用
        组件可以理解为就是特殊的Vue实例，不需要手动的实例化而已，它用于管理自己的模板
    * */
    Vue.component('component-a',{
        /*template选项指定组件的模板代码*/
        template:'<div><h1>头部组件</h1></div>',
        /*在组件中，data选项必须是一个函数*/
        data:function(){
            return{
                name:'全局组件'
            }
        }
    })
    var vm = new Vue({
        el:'#app',
        data:   {
            message:'uniapp'
        },
        methods:{
        }
    });
    const ComponentB ={
        template:'<div>这是{{ name }}</div>',
        data:function(){
            return {
                name:'局部组件'
            }
        }
    }
    new Vue({
        el:'#app',
        // 组件选项
        components:{
            // key ：value  key组件名,value 就是组件对象
            'component-b':ComponentB
        }
    })
</script>