vue2 组件化 component标签和api

vue组件

什么是组件：组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。

组件化和模块化的不同：

模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一
组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用

说明白点，比如我们很多页面都有一个弹框 表格加图表组成的块，那么我们就可以将这个块，单拿出来形成一个组件，在我们想使用的时候，直接调用这个组件就可以了，不需要在重新写一遍相同的代码。同时我们可以给这个组件定义上数据和方法应对我们调用时的不同需求。

全局组件定义的例子

这些只是简单的例子，组件没有很大


// 方式一
var p1=Vue.extend({
    template:'方式一
'
})
Vue.component('p1',p1)
// 方式二
Vue.component('p2',{template:'方式二
'})
// 方式三
// html 
// vue
Vue.component('p3',{template:'#p3'})
// 方式四
// html
// vue
Vue.component('p4',{template:'#p4'})
 
 
// app中
'app'>
    <p1>p1>
    <p2>p2>
    <p3>p3>
    <p4>p4>

// vue实例
const vm = new Vue({
el: '#app',
data: {},
methods: {}
})

使用components属性定义局部子组件

父组件


 
<script>
import home from '@/views/home/index'  // 引用组件的路径
 
export default {
  name: 'App',
  components: { // 注册
    home
  }
}
script>

子组件


 
<script>
export default {
  name: 'Index',
  props: {
    msg: String
  }
}
script>

使用component标签调用组件

通过 is 切换当前展示的组件


 
<script>
import home from '@/views/home/index'
import my from '@/views/my/index'
 
export default {
  name: 'App',
  components: { // 引用组件
    home, my
  },
  data() {
    return {
      flag: true // 定义flag控制组件
    }
  }
}
script>

两个子组件相同代码同上一个子组件就是颜色不一样，不展示了直接看效果