Vue入门教程 第五篇 （组件）

component（组件）

vue是单页面web程序，这意味着需要大量模块化界面参与其中，这就是组件。

组件是一个实现单一功能的vue界面，也可以是一个以功能划分而成的复杂vue界面。

 

注册组件：

 Vue.component('my-component-name', { /* ... */ }) 

范例：

<div id="app">
    <runoob></runoob>
</div>
<script>
// 注册
Vue.component('runoob', {
  template: '<h1>自定义组件!</h1>'
})
new Vue({
  el: '#app'
})
</script>

以上这些组件是全局注册的。也就是说它在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

 

局部注册组件：

<div id="app">
    <runoob></runoob>
</div>
<script>
var Child = {
  template: '<h1>自定义组件!</h1>'
}
new Vue({
  el: '#app',
  components: {
    'runoob': Child// <runoob> 将只在父模板可用
  }
})
</script>

模块中注册组件：

<template>
 <BaseInput
  v-model="searchText"
  @keydown.enter="search"
 />
 <BaseButton @click="search">
  <BaseIcon name="search"/>
 </BaseButton>
</template>

<script>
import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'
import BaseInput from './BaseInput.vue'

export default {
  components: {
    BaseButton,
    BaseIcon,
    BaseInput
  }
}
</script>

 

export和export default

export 和export default 都用来导出模块，Vue 的单文件组件通常需要导出一个对象，这个对象是 Vue 实例的选项对象，以便于在其它地方可以使用 import 引入。

而 new Vue() 相当于一个构造函数，在入口文件 main.js 构造根组件的同时，如果根组件还包含其它子组件，那么 Vue 会通过引入的选项对象构造其对应的 Vue 实例，最终形成一棵组件树。

 

export 可以导出多个命名模块，例如：

//demo1.js
export const str = 'hello world'
export function f(a){
    return a+1
}

对应的引入方式：

//demo2.js
import { str, f } from 'demo1'

 

export default 只能导出一个默认模块，这个模块可以匿名，例如：

//demo1.js
export default {
    a: 'hello',
    b: 'world'      
}

对应的引入方式（模块可以起别名）：

//demo2.js
import obj from 'demo1'

 

父子组件相互调用函数

父调子：

在vue中声明子组件并设置ref属性，PageContractDetail是子组件：

 <PageContractDetail ref="contractDetail"></PageContractDetail> 

在代码中使用this.$refs.子组件ref值.子组件函数() 方式调用：

  this.$refs.contractDetail.initData(row.id); 

 

子调父：

直接使用this.$parent.父函数() 调用即可：

 this.$parent.hideDetail();