美文网首页
Vue2.0注册局部组件和全局组件

Vue2.0注册局部组件和全局组件

作者: 码痞 | 来源:发表于2017-05-25 17:21 被阅读594次

    记录一下不使用vue-router注册局部组件和全局组件

    注册一个局部组件 文件:agg.vue

    <template>
        <div>
          <p>Hello my Vue</p>
          <test></test>
        </div>
    </template>
    
    <script type="text/ecmascript-6">
      //Vue2.0直接抛出作为组件
      var testDiv = {
        template: '<div>{{msg}}</div>',
        data:function(){
          return {msg:'一个局部组件在这里'}
        }
      };
    
    export default {
        name: 'agg',
        data () {
            return {
    
            }
        },
        components :{
          'test': testDiv   //在该实例中注册
        }
    }
    
    </script>
    
    <style>
    
    </style>
    

    注册一个全局组件

    <template>
      <div id="app">
        ![](./assets/logo.png)
        <agg></agg>
        <agg></agg>  //在这里使用他
        <agg></agg>
      </div>
    </template>
    
    <script>
    import Hello from './components/Hello'
    //引用,将这个输出实例引用并起名为Agg
    import Agg from './components/aggView.vue'   
    
    export default {
      name: 'app',
      components: {
        Hello,
        Agg   //将这个实例注册到组件
      }
    }
    </script>

    相关文章

      网友评论

          本文标题:Vue2.0注册局部组件和全局组件

          本文链接:https://www.haomeiwen.com/subject/mlezxxtx.html