vue 组件

一、封装组件的步骤

1.  建立组件的模板，先把架子搭起来，写写样式，考虑好组件的基本逻辑。

2.  准备好组件的数据输入。即分析好逻辑，定好 props 里面的数据、类型。

3.  准备好组件的数据输出。即根据组件逻辑，做好要暴露出来的方法。

4.  封装完毕了，直接调用即可。

 

二：代码详解

<search @select="select" :list="list" :value="value"></search>

1、props（传参数据）

list、value 都是需要传给子组件的数据

子组件接收传参数据：

props: {
  list: Array,
  value: Object
},
mounted() {
  this.data = this.list
}

props 中接收数据，注意props对象里面 键值 是对该数据的 数据类型 的规定。做了规范，使用者就只能传输指定类型的数据，否则报警告。

而props对象中的数据，我们可以直接在当前组件中使用  this.searchList，可以直接使用。这里要强调一下，props传过来的数据只做展示，不得修改，想修改，再新写一个data中的变量承接做数据的再处理。至于原因，同上，可以看一下js的原型。至于原理嘛，不懂的可以取脑补一下 js的原型 。

2、emit的使用（如何暴露组件方法）

我们已经会使用 父组件向子组件传数据了，那如子组件如何来修改父组件的数据呢？

$emit 方法去调父组件的方法，在父组件中修改data的数据。

// 父组件
<search @select="select" :list="list" :value="value"></search>

select(value) {
  this.value = value;

  console.log(this.value);
}

// 子组件
this.$emit('select', value)

将父组件的方法注入子组件  @select="select" ，然后在子组件中通过 $emit 调用他，并传递参数，达到修改的目的。

 

created：在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted：在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用：var ctx = document.getElementById(ID)；通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选。

三、完整代码

<template>
  <div class="">
    <search @callback="callback" :searchList="searchList"></search>

    <hr>
    <pre>searchList = {{searchList}}</pre>
    <pre>selectValue = {{selectValue}}</pre>
  </div>
</template>

<script>
  // 引入组件
  import search from '../modules/search'

  export default {
    // 组件数据
    data() {
      return {
        searchList: [
          '草船借箭',
          '大富翁',
          '测试数据'
        ],
        selectValue: ''
      }
    },

    // 注册组件
    components: {
      search
    },

    // 方法集合
    methods: {
      callback(value) {
        this.selectValue = value
      }
    }
  }
</script>

<template>
    <dl class="">
      <dd
        v-for="(item, index) in searchList"
        :key="index"
        @click="choseValue(item)">{{item}}</dd>
    </dl>
</template>

<script>
  export default {
    // 组件数据
    data() {
      return {
        data: [],
        searchValue: ''
      }
    },

    // 接收数据
    props: {
      searchList: Array
    },

    // 钩子函数
    mounted() {
      this.data = this.searchList;
    },

    // 方法集合
    methods: {
      choseValue(value) {
        // 通过$emit来回调父组件修改值
        this.$emit('callback', value);
      }
    }
  }
</script>

 

相关阅读：

https://www.cnblogs.com/pengfei-nie/p/9134367.html

https://blog.csdn.net/xdnloveme/article/details/78035065