Vue components 組件 使用

组件可以扩展 HTML 元素，封装可重用的代码。所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。
第一步：引用组件

import facePop from './components/facePop'

第二步：注册组件
新建一个components文件夹存放组件
src/components/facePop.vue

<template>
    <div>
        <h2>我是一个facePop组件</h2>
    </div>
</template>

src/index.vue （facePop为组件名）

<template>
  <div>
    <facePop></facePop>      <!--在模板中使用kebab-case 两种组件名称定义方式都可以-->
    <face-pop></face-pop>    <!--在模板中使用PascalCase-->
  </div>
</template>

<script>
  import facePop from './components/facePop';     //1、引入组件 import后的名字一般与组件名称相同，也可不一样
  export default{
    data(){},
    components:{
     facePop       //2、注册组件 一般直接取一个名字  即：facePop：facePop
    }
  }
</script>

全局组件实例

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

局部组件

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

第三步：使用组件
传递方式分为两种：
(1) 静态传递：
子组件通过props选项来声明一个自定义的属性，然后父组件就可以在嵌套标签的时候，通过这个属性往子组件传递数据了
（注：prop 是父组件用来传递数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”
prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来）

<v-facePop showFaceDia=“这是文字”></v-facePop> // 此处showFaceDia不加冒号
子组件：
props:{
  showFaceDia: String
}

(2) 动态传递：
父组件：

data: 
{ 
    showFaceDia: false 
}
<v-facePop :showFaceDia=“showFaceDia”></v-facePop>
子组件：
props:{
  showFaceDia: Boolean
}

子组件向父组件传值 （vue写法）

子组件中：
this.showFaceDia = false  
this.$emit('showFaceDia',this.showFaceDia) 
 //执行showFaceDia函数并把要改变的值作为参数带过去

父组件：
methods:{
showFaceDia(msg){
    this.showFaceDia = msg
  }
}
不要忘记在DOM中引用：
<test :title="title" @showFaceDia="showFaceDia"></test>
 //注意showFaceDia后不能加括号

父组件调用子组件的方法
ref用在子组件上，指向的是组件实例，可以理解为对子组件的索引，通过$ref可以获取到在子组件里定义的属性和方法
//父组件

<v-test :title="title" ref="aa"></v-test> //通过ref为子组件赋予ID引用
<div @click="getChild()"></div>
getChild(){
  this.$refs.aa.childFun()   // 此处使用
}

子组件调用父组件的方法

（1）直接在子组件中通过this.$parent.event来调用父组件的方法
（2）在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了实例:
子组件：
methods: {
        getParent () {
            this.$emit('togglePop')  //此处直接写父组件的事件名称
        }
    }
父组件：
DOM中：<test :title="title" @togglePop="togglePop"></test>
togglePop(){
            console.log('ddddddd')
        },

学习网站：https://www.runoob.com/vue2/vue-component.html