Vue全局组件与局部组件

Myth丶恋晨 2023-08-17 16:00 140阅读 0赞

**全局注册**组件，组件在注册之后可以用在任何新创建的 Vue 根实例的模板中使用，**局部注册**的组件只能在指定父组件下使用，作用域小。

<template>
      <div id="app">
        <div>
          <div>{
       {msg}}</div>
          <child-one></child-one>
          <child-two> </child-two>
          <global-component></global-component>
        </div>
        <global-component></global-component>
      </div>
    </template>
    
    <script>
      import Vue from 'vue'
    
      // 定义全局组件global-component，可以用于根节点下的任何地方
      Vue.component('global-component', {
        template: "<div>{
       {globalTitle}}</div>",
        data: function() {
          return {
            globalTitle: '我是全局组件'
          }
        }
      })
    
      export default {
        name: 'App',
        data() {
          return {
            msg: '研究全局组件与局部组件'
          }
        },
        //定义一个局部子组件
        components: {
          'child-one': {
            template: '<div>{
       {oneTitle}}</div>',
            //子组件的数据必须以函数返回值的形式定义，不可以使用对象定义
            data: function() {
              return {
                oneTitle: '我是局部子组件child-one'
              }
            }
          },
          'child-two': {
            template: '<div>{
       {towTitle}}</div>',
            data: function() {
              return {
                towTitle: '我是局部子组件child-two'
              }
            }
          }
        }
      }
    </script>
    <style>
      #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
      }
    </style>

![20190927173057494.png][]

[20190927173057494.png]: /images/20230810/052646e31cfc47c5bc01ff992e42d388.png