vuejs学习3

1、验证的type 类型可以是：
• String
• Number
• Boolean
• Object
• Array

• Function

my-compoent ’，｛
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;

2、当子组件需要向父组件传递数据时，就要用到自定义事件

子组件用$emit （）来触发事件，父组件用$on（）来

监昕子组件的事件。父组件也可以直萨在子组件的自定义标签上使用v-on 来监昕子组件触发的自定义事件

3、除了用v-on 在组件上监听自定义事件外，也可以监昕DOM 事件，这时可以用.native 修饰符

表示监听的是一个原生事件，监听的是该组件的根元素，

<div id= ” app ”>
< p ＞总数：｛｛ total }}</p>
<my - component
@increase=” handleGetTotal ”
@reduce= ” handleGetTotal ” ></my-component>
</div>
< script>
Vue.component ( ’ my - component ’, {
template :’ \
<div >\
<button @cl 工ck＝ ” handle Increase” > + l </button > \
<button @click= ” handleReduce ” >- 1 < /button> \
</div> ’,
data : function () {
return {
counter : 0
methods : {
handleincrease: function () {
this . counter++;
this . $emit (’ increase ’, this.counter);
} ,
handleReduce: function () {
this . counter--;
this.$em工t (’ reduce ’， th工s.counter) ;
., ) }
var app =new Vue({
el :’ #app ’,
data: {
total: 0
methods : {
handleGetTotal: function (total) {
this . total = total ;
})

</script>

扫描二维码关注公众号，回复： 4608163 查看本文章

4、bus中介

{{message ))
< component- a ></ component - a>
</ div>
<script>
var bus= new Vue ();
Vue . component (' component - a ’, {
template : ’ <button @click ＝ ” handleEvent ” 〉传递事件＜／ button ＞ ’，
methods : {
handleEvent: f u nction () {
bus ．♀ em 工t （’ on - message 勺’ 来自组件c o mponent-a 的内容’ ）；
., ) }
var app =new Vue ( {
el :’ #app ’,
data : {
message : ”
} ,
mounted : function () {
var this = th 工s;
／／在实例初始化时，监听来自bus 实例的事件
bus. $on (’ on-message ’, function (msg) {
this.message = msg;
., ) }
})
</script>
首先创建了一个名为bus 的空Vue 实例，里面没有任何内容；然后全局定义了组件
component-a ；最后创建Vue 实例app ，在app 初始化时，也就是在生命周期mounted 钩子函数里监
听了来自bus 的事件on-message ，而在组件component-a 中，点击按钮会通过bus 把事件on-message
发出去，此时app 就会接收到来自bus 的事件，进而在回调里完成自己的业务逻辑。
这种方法巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级，而且Vue 1.x 和
Vue 2.x 都适用。如果深入使用，可以扩展bus 实例，给它添加data 、methods 、computed 等选工页，
这些都是可以公用的，

5\在子组件中，使用this.$parent 可以直接访问该组件的父实例或组件，父组件也可以通过
this.$children 访问它所有的子组件，而且可以递归向上或向下无线访问，直到根实例或最内层的组

件.

尽管V ue 允许这样操作，但在业务中，子组件应该尽可能地避免依赖父组件的数据，

更不应该去主动修改它的数据，因为这样使得父子组件紧藕合，只看父组件，很难理解父组件的状态，因

为它可能被任意组件修改，理想情况下，只有组件自己能修改它的状态。父子组件最好还是通过
props 和$emit 来通信。

6\在父组件模板中，子组件标签上使用ref 指定一个名称，井在父组件内通过this.$refs 来访问指
定名称的子组件。Rrefs 渲染完成后才填元，并且它是非响应式的．它仅仅作为一个直接访问子

苦？组件的应急方案，应当避免在模板或计算属性中使用础。

<component-a ref= ” comA ” ></ component-a >

var msg = this.$refs.comA.message;

7\slot内容分发

https://blog.csdn.net/sinat_17775997/article/details/52484072

8\作用域slot是一种特殊的slot ，使用一个可以复用的模板替换己渲染元素

<child-component>
<template scope= ” props ” >
<p ＞来组父组件的内容＜ Ip>
<p>{{ props.msg }}</p>
</template>

</child-component>

9\通过$ slots 可以访问某个具名slot, this . $slots.default 包括了所有没有被包含在具名slot 中的节

点

10\Vue.js 提供了一个特殊的元素＜co mponent> 用来动态地挂载不同的组件，使用is 特性来选择要挂载的组件。

11、resolve异步组件

12\vuejs 异步更新队列

默认情况下，vuejs 是异步执行 dom 更新操作的。在下一个 tick 来临之前，vuejs 会收集数据变化，置于一个队列之中，下个 tick 来临之时，批量执行这些更新，并清空队列。

大部分情况下我们不需要关心这个更新 dom 机制，但是当下一步操作与之有关联时，我们就需要 nextTick 来解决了。

<div id="app">
  <div id="div" v-if ="showDiv">这是一段文本</div>
  <button @click= "getText">获取div 内容</button>
</div>
<script>
  var app = new Vue({
    el: '#app',
      data: {
        showDiv: false
      },
      methods: {
        getText: function (component) {
          this.showDiv=true;
          this.$nextTick(function () {
            var text=document.getElementById('div').innerHTML;
            console.log(text);
          })
        }
      }
    })
</script>

13\<script type=” text/x- template ” id= ” my-component ”>

在一些非常特殊的情况下，我
们需要动态地去创建Vue 实例， Vue 提供了Vue.extend 和$mount 两个方法来手动挂载一个实例。
Vue.extend 是基础Vue 构造器，创建一个“子类”，参数是一个包含组件选项的对象。
如果Vue 实例在实例化时没有收到el 选项，它就处于“未挂载”状态，没有关联的DOM 元
素。可以使用$mount（）手动地挂载一个未挂载的实例。这个方法返回实例自身，因而可以链式调用
其他实例方法

猜你喜欢