vue.js之组件注册

组件封装与调用

• 组件的优势
  • 封装性
  • 复用性
  • 单一职责

  <div id="app"></div>

 const ComponentB = {
    template: `<div>ComponentB</div>`,
  };
  //全局注册组件
  Vue.component("ComponentA", {
    // 局部注册组件
    components: {
      ComponentB,
    },
    methods: {
      handleClick() {
        this.count++;
      },
    },
    data() {
      return {
        count: 0,
      };
    },
    template: `<div>ComponentA
    {{count}}
    <button @click="handleClick">click</button>
        <ComponentB></ComponentB>
    </div>`,
  });
  //组件调用
  app = new Vue({
    el: `#app`,
    template: `
    <div>{{msg}}
        <ComponentA></ComponentA>   
        <ComponentA></ComponentA>
    </div>`,
    data: {
      msg: "hello world",
    },
  });

• 全局注册组件注意事项：
  • 必须有根节点
  • data 必须是个函数
• 全局注册的组件，每一个地方都可以引用。须使用Vue.component()来注册组件。
• 局部注册的组件，只能在注册过的实例中引用。