Vue全局组件和局部组件

Vue实例中的配置项： data、computed、watch、methods 以及生命周期钩子函数(created,mounted)等
Vue 全局组件

<body>
  <div id="app">
    <home></home>
  </div>
  <script src='./vue.js'></script>
  <script>
  //创建一个全局组件
    Vue.component('home', {
      template: `
     <div>
       <h1>一段模板内容</h1>
       <span>{{ msg }}</span>
       <button  @click='add'>渡梵尘</button>
     </div>
     `,
     //一个组件的 data 选项必须是一个函数
      data() {
        return {
          msg: '模板为自己提供的数据'
        }
      },
      methods: {
        add() {
          this.msg = '点击切换的内容'
        }
      }
    })
    //Vue实例
    const vm = new Vue({
      el: '#app',
      data: {
      },
      methods: {
      }
    })
  </script>
</body>

Vue局部组件

<body>
  <div id="app">
    <home-a></home-a>
    <home-b></home-b>
  </div>
  <script src="./vue.js"></script>
  <script>
    var homeA = {
      template: `
     <div>
      <h1>局部组件</h1>
     </div>
     `
    }
    var homeB = {
      template: `
     <div>
      <h2>局部组件A中的子组件</h2>
     </div>
     `
    }
    const vm = new Vue({
      el: '#app',
//对于 components 对象中的每个属性来说，
//其属性名home就是自定义元素的名字，其属性值homeA就是这个组件的选项对象
      components: {
        'home-a': homeA,
        'home-b': homeB
      }
    })
  </script>
</body>

局部组件中的父子组件

 <script>
    const vm = new Vue({
      el: '#app',
      components: {
        'home-a': {
          template: `
         <div>
          <h1>局部组件</h1>
          <home-b></home-b>
         </div>
         `,
          components: {
            'home-b': {
              template: `
          <div>
           <h1>局部组件ffffffff</h1>
          </div>
          `
            }
          }
        }
      }
    })
  </script>

Vue全局组件和局部组件

猜你喜欢