Vuejs之组件--- 学习笔记

作者: SevenAnon | 来源:发表于2018-04-15 14:49 被阅读0次

Vuejs之组件--- 学习笔记
vuejs学习之创建组件
基础知识（三）android
uiscrollview
JetPack学习笔记之Navigation（二）
Vuejs学习笔记
深入理解 Vuejs 组件
Vue 2.0修仙之路 — 组件
Vuejs组件
vue2.0父子组件传值

Before

最近开始小程序开发，细看一番，小程序开发也挺类似于vuejs开发，也有了成型的小程序采用vuejs开发。便开始了学习

vue是最近讨论的比较多的一个前端框架，其类似于ag的但是其学习成本远低于ag，因此也是许多新手首选入门的框架之一。vue的核心之一应当就是组件的使用与构建。那么在此就先简单的记录下此次学习的收获

如何创建

注册组件就是利用Vue.component(name, options)方法，头一个参数为组件名，后一个参数为json格式的组件配置。

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

如上我们注册了一个组件，接下来就是在Vue实例挂载的Dom元素中使用它。、

<div id="example">
  <my-component></my-component>
</div>
// 注册
Vue.component(...)   // 如上

// 创建根实例
new Vue({
  el: '#example'
})

渲染为:

<div id="example">
  <div>A custom component!</div>
</div>

上述方法为全局注册，如果我们只希望在局部作用域中使用该组件，可以这样做:

var c = {
  template: '<div>A custom component!</div>'
}

new Vue({
  // ...
  components: {
    // <my-component> 将只在父组件模板中可用
    'my-component': c
  }
})

data属性

在这里有一个需要关注的点，那就是可能初学vue的时候，我们的data属性基本都是使用的一个对象，但是在组件这里，data却应该作为一个函数。

// This code is error
Vue.component('my-component', {
  template: '<span>{{ message }}</span>',
  data: {
    message: 'hello'
  }
})

// Good
Vue.component('my-component', {
  template: '<span>{{ message }}</span>',
  data() {
   return { message: 'hello'; }
  }
})

为什么我们需要这样做？首先我们应当了解在js中，对象是引用类型。实际上说到引用类型大部分人就已经明白了。如果我们在组件构建中仍然采用之前的对象形式，那么多个复用组件就会使用同一个data对象，从而导致错误产生。而正确的方法则是如上采用了return一个新对象的形式，保证了组件复用的数据正确性。

slot分发

显然，组件的嵌套是我们会经常使用到的，而vue也提供了对应的方法 => slot, 正如其中文意思，插槽，我们嵌入的内容就相当于插入这个插槽中。

slot相当于子组件设置了一个地方，如果在调用它的时候，往它的开闭标签之间放了东西，那么它就把这些东西放到slot中。

当子组件中没有slot时，父组件放在子组件标签内的东西将被丢弃；
子组件的slot标签内可以放置内容，当父组件没有放置内容在子组件标签内时，slot中的内容会渲染出来；
当父组件在子组件标签内放置了内容时，slot中的内容被丢弃
e.g.

// Child
<div>
  <h2>我是子组件的标题</h2>
  <slot>
    只有在没有要分发的内容时才会显示。
  </slot>
</div>

// Parent
<div>
  <h1>我是父组件的标题</h1>
  <my-component>
    <p>这是一些初始内容</p>
    <p>这是更多的初始内容</p>
  </my-component>
</div>

// Result
<div>
  <h1>我是父组件的标题</h1>
  <div>
    <h2>我是子组件的标题</h2>
    <p>这是一些初始内容</p>
    <p>这是更多的初始内容</p>
  </div>
</div>

当我们使用了多个slot时，新的问题出现，我们如何确保插入正确的槽？即如何分发内容？vue提供了一种方案=>具名插槽:

// Child -> app-layout
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

// Parent
<app-layout>
  <h1 slot="header">这里可能是一个页面标题</h1>

  <p>主要内容的一个段落。</p>
  <p>另一个主要段落。</p>

  <p slot="footer">这里有一些联系信息</p>
</app-layout>

// Result
<div class="container">
  <header>
    <h1>这里可能是一个页面标题</h1>
  </header>
  <main>
    <p>主要内容的一个段落。</p>
    <p>另一个主要段落。</p>
  </main>
  <footer>
    <p>这里有一些联系信息</p>
  </footer>
</div>

组件间通信

组件间的通信通常分为父子组件与非父子组件通信。在父子组件通信中，采用vue提供的prop属性。Prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。因此，
注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。
那如果我们希望信息能够进行双向的传递，那么可以采用emit与on，熟悉js事件的同学在这里其实就能很快明白在这里的原理其实在于我们在发送方自定义一个事件，事件参数为传递数据，同时我们在接收方处监听该事件，以此实现信息的传递。借用此我们能很方便的实现双向的数据传递，且可以避免由于某一方对数据的不当修改导致另一方的出错。然而，尽管如此，其仍然不够使用，因为在多组件通信中，这样的写法就显得繁杂。因此vue提供了一个插件， vuex，其为一个状态管理插件，正适用于这些需要组件间通信的场景。
这里给出使用prop与emit/on进行消息传递的例子，关于vuex再后面博客再补充。

// prop通信
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 就像 data 一样，prop 也可以在模板中使用
  // 同样也可以在 vm 实例中通过 this.message 来使用
  template: '<span>{{ message }}</span>'
})

<child message="hello!"></child>



// 事件通信
var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)


// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
  // ...
})