Vue - 组件

全局组件构建

方式1

js

Vue.component('comp1', Vue.extend({
    template: '<p>我是组件</p>'
}))

html

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

方式2

js

Vue.component('comp2', {
    template: '<p>我是组件</p>'
})

html

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

方式3

js

Vue.component('comp3', {
    template: '#comp3'
})

html

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

<template id="comp3">
    <div>
        <p>我是组件</p>
    </div>
</template>

私有组件构建

js

var vm = new Vue({
    el: '#app',

    components: {
        comp4: {
            template: '#comp4'
        }
    }
})

html

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

<template id="comp4">
    <div>
        <p>我是组件</p>
    </div>
</template>

组件切换

方式1：通过v-if、v-else

<comp1 v-if='flag'></comp1>
<comp2 v-else></comp2>

方式2：

<component :is='compName'></component>

compName变量的值为组件名称（字符串类型）

父子组件传值

html

<div id="app">
    <comp :msgs='msg'></comp>
</div>

<template id='comp'>
     <div>
        <p>{{ msg }}</p>
     </div>
</template>

msgs是子组件接收的值，msg由父组件data中提供

js

var vm = new Vue({
    el: '#app',
    data: {
        msg: 'hello vue',
    },
    components: {
        comp: {
            template: '#comp',
            props: ['msg']
        }
    }
})

子组件通过props接收父组件而来的数据，这种方式仅支持单向，父组件->子组件

如果子组件需要传递数据到父组件，可使用事件触发的方式传递

子组件触发父组件事件并传值

html

<div id="app">
    <comp  @func='parentFunc'></comp>
</div>
	
<template id='comp'>
    <div>
        <p @click='callParentFunc'>我是子组件</p>
    </div>
</template>

子组件通过this.emit()触发绑定事件func，func调用父组件的parentFunc方法

js

new Vue({
    el: '#app',
    methods: {
        parentFunc (data) {
            console.log(data)
        }
    },
    components: {
        comp: {
            template: '#comp',
            methods: {
                callParentFunc () {
                    this.$emit('func', 'hello vue')
                }
            }
        }
    }
})

父组件触发子组件事件

html

<div id="app">
    <comp  ref='comp'></comp>
</div>
	
<template id='comp'>
    <div>
        <p>我是子组件</p>
    </div>
</template>

通过ref对子组件进行引用

js

new Vue({
    el: '#app',
    methods: {
        parentFunc () {
            this.$refs.comp.sonFunc()
        }
    },
    components: {
        comp: {
            template: '#comp',
            methods: {
                sonFuc () {
                    console.log('hello vue')
                }
            }
        }
    }
})

父组件方法通过his.$refs.comp得到子组件的引用，可调用子组件中的data数据以及方法

同级组件传值

同级组件通信传值，需要用到事件总线bus

以下在vue脚手架搭建的项目中演示

在src/main.js中Vue.prototype绑定bus

Vue.prototype.bus = new Vue()

src/main.js代码如下

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

Vue.prototype.bus = new Vue()

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

创建pageA.vue

<template>
  <div>
    <p @click='send'>I am pageA</p>
  </div>
</template>

<script>
export default {
  name: 'pageA',
  
  methods: {
    send () {
      this.bus.$emit('sendMsg', 'hello pageB')
    }
  }
}
</script>

pageA中的send()方法执行this.bus.$emit，触发sendMsg事件，并传递值'hello pageB'，只要在同级组件中监听到sendMsg事件，就能实现通信

创建pageB.vue

<template>
  <div>
    <p>I am pageB</p>
  </div>
</template>

<script>
export default {
  name: 'pageB',
  
  mounted () {
    this.bus.$on('sendMsg', function (data) {
      console.log(data)
    })
  }
}
</script>

在pageB.vue中的生命周期mounted阶段，通过this.bus.$on监听sendMsg事件，回调函数中接收传递而来的数据

创建page.vue，引入pageA.vue、pageB.vue

<template>
  <div>
    <p>I am page</p>
    <pageA/>
    <pageB/>
  </div>
</template>

<script>
import pageA from './pageA'
import pageB from './pageB'

export default {
  name: 'page',
  
  components: {
    pageA,
    pageB
  },
}
</script>

此时pageA与pageB为同级组件

当点击I am pageA，在pageB.vue中会接收到传递的值