Vue 元件传递资料的命名坑与型别

最会伪装的就是变数，变来变去常让人分不清是变到哪里去了...根本是忍者！

这几天写的都是与元件相关，元件的重要有一部分是因为它可以为我们省不少力，以前接触 PHP 也是会将也面拆成好几大块，然後在引入整个页面中，只不过当时需要把完整的整页 HTML 码拆开，且还要花力气把 CSS 和 HTML 分离，实在是有点混乱。而现在的前端框架已经能做到将版面拆分成模块，再将模块拆成元件，这样元件再组合起来，复用性就增加了不少。

在 Vue 官网里，虽然使用方式写着很清楚的，但是有时候在学习的时候无法马上抓到精华，往往是自己实作时会出现一大堆问题，有时解 Bug 会解到抓头，但解完时又是向学习之路迈前一步。在真的解不出来的时候，回头看官网的资料往往是可以让迷雾中的自己找到出路，然後轻叹一声，唉，之前怎麽没看懂呢！？

有时候在看课程或范例时，会发现所有无论在父元件或子元件、属性名常常是统一命名，这样当然不会出现问题，但是现实的实作我们会依变数的意义来命名，这时出现的错误就很难找出来，所以看完课程或解说，自己重新写一遍，且把所有的属性或变数名称换掉，实作出来没有出错才算是真的了解其运作。

Debug 时出现的错误讯息有时只能给一个方向，甚至会是一种混淆（或是自己没有真的看懂...），有时这些错误可能是在某些区域不能备注(commend)的原因所致，遇到这种状况最好先将多余的程序码去掉（不是备注），再用最简单的方式一一测试，比较容易找到问题。

不接受大写的 HTML 标签

以最近遇到的问题为例，要将父元件的某一属性值，以动态的方式传到子元件里，除了在 HTML 里的模版标签里加上属性外，还要在子主件的props上注册，并将其放到子元件的模版template中才算完成。在官网里有说到Prop 的大小写 (camelCase vs kebab-case)，原因是在 HTML 的命名规则里，是不允许驼峰式的「大写」，需要将其改成小写，或是两个单字中间以-隔开。以官网的范例：

<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>
<script>
  Vue.component('blog-post', {
    // 在 JavaScript 中是 camelCase 的
    props: ['postTitle'],
    template: '<h3>{{ postTitle }}</h3>'
  })
</script>

所以同一个属性名在props和template的命名是postTitle，在 HTML 的 DOM 标签里就需要写成post-title。我们都习惯一致的名称，所以在这部分很容易没那个习惯或忘了写成 DOM 标签格式而出现错误。

元件传递资料的型别

要将父元件的资料传递过来子元件，可以透过 props，资料型别也可以是字串、物件、布林值、函式甚至是promise，如果以全域元件的方式，我们可以来看一下范例:

在父元件里初始化不同型别的资料，在子元件里我们先在模版里插入代表不同型别的资料变数，接着在 HTML 里放入以子元件为标签的模版标签<text-bloc>，并以 DOM 的命名方式把资料变数修改成属性名并绑定资料，值则为父元件的变数。

在子元件的 Props 以阵列形式加入(注册)这些资料变数，形同告知子元件，有这些值要从父元件接收过来，这样就算成功的把父元件传递到子元件了。如果是阵列，我们也可以利用v-for将阵列里的值一一取出。

<div id="app">
  <div>{{ msg }}</div>
  <text-bloc
    :props-str="propsStr"
    :props-num="postCode"
    :props-boo="isVegan"
    :props-arr="foods"
    :props-obj="boos"
  ></text-bloc>
</div>

<script>
// 子元件
  Vue.config.errorHandler = function (err, vm, info) {};
  Vue.component('text-bloc', {
    props: ['propsStr', 'propsNum', 'propsBoo', 'propsArr', 'propsObj'],
    template: `
      <div>
        <div>{{ 'City: ' + propsStr }}</div>
        <div>{{ 'post Code: ' + propsNum }}</div>
        <div>{{ 12 + propsNum }}</div>
        <div>{{ 'isVegan: ' + propsBoo }}</div>
        <ul>
          <li v-for="(item,index) in propsArr" :key='index'>{{item}}</li>
        </ul>
      <div>{{ propsObj.name}} : {{propsObj.age }}</div>
    </div>
      `,
  });
// 父元件
  const vm = new Vue({
    el: '#app',
    data: {
      msg: '父元件中的资料内容',
      propsStr: 'Paris',
      postCode: 75,
      isVegan: true,
      foods: ['cafe', 'wine', 'apple'],
      boos: {
        name: 'Tracy',
        age: 42,
      },
    },
  });
</script>

周日结束了，铁人赛只剩四天，看来是无法全部写完 vue.js 的基本功能，况且 Vue3 已经发布，接下来应该是倾向学习新版的写法了。

Prop 类型 — Vue.js

每日一句法文有益身心：Bien fait ! --> ㄅㄧㄤ.飞！ --> 干的好！