Vue 组件

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第28天，点击查看活动详情

vue 组件

vue 前端框架的基本功能单元是组件，vue 对象本身也是一个组件（根组件）。

全局组件

Vue.component 用于声明全局组件（不推荐）。

在 vue 中， template 表示组件模板，即组件要展示的内容。模板内只能含有一个根元素！

Vue.component("greet-bar",{  
  template:'
    <div>
      <p>大家好，我是{{name}}</p>
      <button value="改名" v-on:click="changeName"></button>
    </div>
  ',
  data:function(){
    return {name:"王东浩"}
  },
  methods:{
    changeName:function(){
      this.name="甘甜"
    }
  }
})Copy to clipboardErrorCopied

全局注册的组件可以直接用在任何的 Vue 根实例 (new Vue) 的模板中。

<div id="app">  
  <greet-bar></greet-bar>
  <greet-bar></greet-bar>
</div>

<script>
  new Vue({
    el:"#app",
    data:{}
  });
</script>Copy to clipboardErrorCopied

html 文件元素名和属性名不区分大小写，因此不可采用驼峰形式。但在 vue 组件中可以作为驼峰形式识别，全局组件命名为 GreetBar 也能被读取。

局部组件

为避免用户需要一次性加载过多组件，我们可以定义局部组件，只在指定的 vue 对象中使用。

var greetA = {
  data:function(){
    return {name:"王东浩"}
  ,
  template:'<p>hello {{name}}</p>'
};

var greetB = {
  data:function(){
    return {name:"陈伯言"}
  ,
  template:'<p>hello {{name}}</p>'
};Copy to clipboardErrorCopied

在 vue 中声明要调用的组件，就可以在组件内完成调用。

<div id="app">  
  <greet-a></greet-a>  
  <greet-b></greet-b>
</div>

<script>
  new Vue({
    el:"#app",
    data:{},
    components:{
      'GreetA': GreetA,
      'GreetB': GreetB
    },
    // components: { GreetA, GreetB },  
  });
</script>Copy to clipboardErrorCopied

vue 单文件组件(.vue)

在实际项目开发中，我们往往为每一个组件创建一个单独的文件来定义。之间的相互调用统一交由 router 管理。

<template>
  模板内容 html
</template>

<script>
  业务逻辑 export
</script>

<style>
  组件样式 css
</style>

组件交互

父组件向子组件传值

在 vue 中， props 是单向数据流，用于父组件向子组件传值。

1. 在父组件中定义数据

<div id="app">  
  <greet-bar :first-name='sname' last-name = '赵四'></greet-bar>
</div>

<script>
  new Vue({
    el:"#app",
    data:{sname:"尼古拉斯"}
  });
</script>Copy to clipboardErrorCopied

2. 子组件读取并显示

Vue.component("greet-bar",{
  props::['first-name', 'last-name'],  //也可以使用驼峰式接收 firstName
  template:'
    <div>
      <p>大家好，我是{{first-name + "·" + last-name}}</p>
    </div>
  '
})