Vue2学习答疑

记录Vue学习过程中的一些疑问和解答。

参考文档

• Vue2官方教程
• ECMAScript 6教程
• 打造 Vue.js 可复用组件规范

slot插槽

之前从未接触过slot的概念，看官方文档时，完全无法理解。最后通过这篇文章《深入理解vue中的slot与slot-scope》顿悟了。主要的几个概念点如下：

• 插槽，也就是slot，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定 。
• 插槽显示的位置确由子组件自身决定，slot写在组件template的哪块，父组件传过来的模板将来就显示在哪块。

字符串模板和HTML模版的区别

驼峰(camelCase) && 短横线(kebab-case)

prop 命名方案（驼峰式和串联式）

引用官方文档：

HTML 属性名称对大小写不敏感，因此浏览器会将所有大写字符解释为小写字符。也就是说。当你在你 DOM 模板中书写 prop 时，你应当将驼峰式(camelCase)转写为等价的（连字符分割的）串联式(kebab-case)：

Vue.component('blog-post', {
  // 在 JavaScript 中使用驼峰式(camelCase)
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})
<!-- 在 HTML 中使用串联式(kebab-case) -->
<blog-post post-title="hello!"></blog-post>

再次申明，如果是在使用字符串模板的场景，则没有这些限制。

组件命名约定

引用官方文档：

当注册组件 (或者 prop) 时，可以使用 kebab-case (短横线分隔命名)、camelCase (驼峰式命名) 或 PascalCase (单词首字母大写命名)。

// 在组件定义中
components: {
  // 使用 kebab-case 注册
  'kebab-cased-component': { /* ... */ },
  // 使用 camelCase 注册
  'camelCasedComponent': { /* ... */ },
  // 使用 PascalCase 注册
  'PascalCasedComponent': { /* ... */ }
}

// 在 HTML 模板中，请使用 kebab-case：

<!-- 在 HTML 模板中始终使用 kebab-case -->
<kebab-cased-component></kebab-cased-component>
<camel-cased-component></camel-cased-component>
<pascal-cased-component></pascal-cased-component>

当使用字符串模式时，可以不受 HTML 大小写不敏感的限制。这意味实际上在模板中，你可以使用下面的方式来引用你的组件：
kebab-case
camelCase 或 kebab-case (如果组件已经被定义为 camelCase)
kebab-case、camelCase 或 PascalCase (如果组件已经被定义为 PascalCase)

components: {
  'kebab-cased-component': { /* ... */ },
  camelCasedComponent: { /* ... */ },
  PascalCasedComponent: { /* ... */ }
}
<kebab-cased-component></kebab-cased-component>

<camel-cased-component></camel-cased-component>
<camelCasedComponent></camelCasedComponent>

<pascal-cased-component></pascal-cased-component>
<pascalCasedComponent></pascalCasedComponent>
<PascalCasedComponent></PascalCasedComponent>

这意味着 PascalCase 是最通用的声明约定而 kebab-case 是最通用的使用约定。
如果组件未经 slot 元素传入内容，你甚至可以在组件名后使用 / 使其自闭合：
<my-component/>
当然，这只在字符串模板中有效。因为自闭的自定义元素是无效的 HTML，浏览器原生的解析器也无法识别它。

事件名称(event names)

引用官方文档:

与 components 和 props 不同，事件名称并不提供命名自动转换。反之，触发的事件名称必须与监听时的名称完全匹配。例如，如果触发事件名称是以驼峰式命名(camelCased)：
this.$emit('myEvent')
而监听处是以串联式命名(kebab-cased)时，无法接收到事件：
<my-component v-on:my-event="doSomething"></my-component>
与 components 和 props 不同，事件名称永远不会用作 JavaScript 变量或属性名称，所以没有理由去使用驼峰式命名(camelCase)或帕斯卡命名(PascalCase)。此外，DOM 模板中的 v-on 事件监听器会自动转换为小写（这是因为 HTML 属性名称不区分大小写），所以 v-on:myEvent 会变为 v-on:myevent - 由此 myEvent 就不可能监听到事件触发。
由于这些原因，我们建议你总是使用串联式命名(kebab-cased)来命名事件名称。

组件 >> 非Prop特性

官方文档对非Prop介绍中，只提到如何定义，没有介绍如何获取非Props的值。文档如下：

所谓非 prop 特性，就是指它可以直接传入组件，而不需要定义相应的 prop。
尽管为组件定义明确的 prop 是推荐的传参方式，组件的作者却并不总能预见到组件被使用的场景。所以，组件可以接收任意传入的特性，这些特性都会被添加到组件的根元素上。
例如，假设我们使用了第三方组件 bs-date-input，它包含一个 Bootstrap 插件，该插件需要在 input 上添加 data-3d-date-picker 这个特性。这时可以把特性直接添加到组件上 (不需要事先定义 prop)：
<bs-date-input data-3d-date-picker="true"></bs-date-input>
添加属性 data-3d-date-picker=”true” 之后，它会被自动添加到 bs-date-input 的根元素上。

解决方案：
在组件的mounted中使用 this.$el.getAttribute('propsName')

示例

<div id="app">
    <component-test :child-content="product-id" informal-props'="informal props text ....."></component-test>
</div>

<script>
    Vue.component('component-test', {
      template:'',
      mounted: function () {
        console.log(this.$el.getAttribute('informal-props'));
      }
    });
</script>