Vue.js实战读书笔记（2）

Rehoni / 2019-03-08

学习链接：

Vue官方教程 https://cn.vuejs.org/
https://www.w3cplus.com/blog/vue

v-model: 绑定动态数据可以用v-bind来实现。

修饰符：lazy（change事件中同步），number（限定数字），trim（自动过滤首位的输入空格），
template的DOM结构必须被一个元素包含，如果直接写成 “这里是组件的内容”，不带<div></div>是无法渲染的。
Vue 组件的模板在某些情况下会受到HTML的限制，比如＜table＞内规定只允许是〈位〉、＜td＞、<th＞等这些表格元素，所以在＜table＞内直接使用组件是无效的。这种情况下，可以使用特殊的is属性来挂载组件。 <tbody is="my-component"></tbody>tbody在渲染时，会被替换为组件的内容。常见的限制元素还有＜ul＞、＜ol＞、＜select>。

props: 数组和对象。

props 中声明的数据与组件 data 函数 return 的数据主要区别就是： props 的来自父级，而 data 中的是组件自己的数据，作用域是组件本身，这两种数据都可以在模板 template 及计算属性 computed和方法 methods 中使用。

由于 HT岛E 特性不区分大小写，当使用 DOM 模板时，驼峰命名 (camelCase)的 props 名称要转为短横分隔命名 (kebab-case)

<div id=" app” >
 <my-component warning-text ＝ ”提示信息 " ＞＜／ my-component>
 </div>
 <script>
 Vue.component ( ' my-component ', {
 props: [ 'warningText'],
 template:' <div>{{ warningText }} </div>'
 });
 var app =new Vue({
 el:' #app '
 })
 </script>

有时候，传递的数据并不是直接写死的，而是来自父级的动态数据，这时可以使用指令 v-bind 来动态绑定 props 的值，当父组件的数据变化时，也会传递给子组件。
如果你要直接传递数字、布尔值、数组、对象，而且不使用v-bind，传递的仅仅是字符串。下边message.length=7，而:message.length=3。
在JavaScript中对象和数组是引用类型，指向同一个内存空间，所以 props 是对象和数组时，在子组件内改变是会影响父组件的。

  <div id=" app " >
    <my-component message=" [ 1 , 2, 3 ] " ></my-component>
    <my-component :message=" [ 1 , 2, 3 ] " ></my-component>
  </div>
  <script>
    Vue.component (' my-component ', {
    props: [ ' message ' ],
    template:'<div>{{ message.length }}</div>'
    });
    var app =new Vue ( {
      el: '#app'
    })
  </script>

数据验证

type: String, Number, Boolean, Object, Array, Function。type也可以是一个自定义构造器，使用instanceof检测。

Vue.component('my-component',{
  props : {
    ／／必须是数字类型
    propA : Number ,
    ／／必须是字符串或数字类型
    propB : [String , Number] ,
    ／／布尔值，如果没有定义，默认值就是 true
    propC: {
      type : Boolean ,
      default : true
    }
    ／／数字，而且是必传
    propD: {
      type: Number ,
      required : true
    }
    ／／如果是数组或对象，默认值必须是一个函数来返回
    propE: {
      type : Array ,
      default : function () {
        return [] ;
      }
    }
    ／／自定义一个验证函数
    propF: {
      validator : function (value) {
        return value > 10;
      }
    }
  }
});

组件通信

自定义事件：如果你了解过 JavaScript 的设计模式一一观察者模式，一定知道 dispatchEvent 和 addEventListener这两个方法。 Vue 组件也有与之类似的一套模式，子组件用 $emit（）来触发事件，父组件用 $on（）来监听子组件的事件。
中央事件总线(bus)：首先创建了一个名为 bus 的空 Vue 实例，里面没有任何内容；然后全局定义了组件component-a；最后创建 Vue 实例 app ，在 app 初始化时，也就是在生命周期 mounted 钩子函数里监听了来自 bus 的事件 on-message，而在组件 component-a 中，点击按钮会通过 bus 把事件 on-message发出去，此时 app 就会接收到来自 bus 的事件，进而在回调里完成自己的业务逻辑。如果深入使用，可以扩展 bus 实例，给它添加 data 、 methods、 computed 等选工页，这些都是可以公用的，在业务中，尤其是协同开发时非常有用，因为经常需要共享一些通用的信息，比如用户登录的昵称、性别、邮箱等，还有用户的授权 token 等。只需在初始化时让 bus 获取一次，任何时间、任何组件就可以从中直接使用了，在单页面富应用（ SPA ）中会很实用，也可以选择更好的状态管理解决方案vuex。
父链：在子组件中，使用 this.$parent 可以直接访问该组件的父实例或组件，父组件也可以通过this.$children 访问它所有的子组件，而且可以递归向上或向下无线访问，直到根实例或最内层的组件。尽管 Vue 允许这样操作，但在业务中，子组件应该尽可能地避免依赖父组件的数据，更不应该去主动修改它的数据，因为这样使得父子组件紧藕合，只看父组件，很难理解父组件的状态，因为它可能被任意组件修改，理想情况下，只有组件自己能修改它的状态。父子组件最好还是通过props 和 $emit 来通信。
当子组件较多时，通过 this.$children 来一一遍历出我们需要的一个组件实例是比较困难的，尤其是组件动态渲染时，它们的序列是不固定的。 Vue 提供了子组件索引的方法，用特殊的属性 ref 来为子组件指定一个索引名称。通过父组件事件函数调用声明 $ref 子组件进行内容访问or修改。$refs只在组件渲染完成后才填充，并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案，应当避免在模板或计算属性中使用$refs。

<div id="app">
  {{message}}
    <component-a></component-a>
</div>
<script>
    var bus = new Vue();
    Vue.component('component-a', {
        template: '<button @click="handleEvent">传递事件</button>',
        methods: {
            handleEvent: function () {
                bus.$emit('on-message', '来自组件component-a的内容');
            }
        }
    });
  var app = new Vue({
      el: '#app',
      data: {
          message: ''
      },
      mounted: function () {
          var _this = this;
          bus.$on('on-message', function (msg) {
              _this.message = msg;
          });
      }
  })
</script>