Vue&组件之间的传值通信&props$&$emits&ref/refs

vue变量赋值的时候，在什么时候用双引号，什么时候用单引号，什么时候不用引号

变量值赋值的时候要根据是什么类型来给对应的符号

1
2
3
4
5
6
7
8
9
String 字符串 类型的加双引号       name="陈钰";

char   字符     类型的加单引号       sex='男';

boolean 布尔值  类型的不加引号     isShow=true;

number 数字      类型的不加引号     num=18;

只要不是char字符类型，String字符串类型，其他的类型都不需要加引号

在vue中也是如此，只不过在data里面的赋值符号要改一下,把等号改为冒号，把最后面的分号改为逗号

1
2
3
4
5
6
7
String 字符串 类型的加双引号       name:"陈钰",

char   字符     类型的加单引号       sex:'男',

boolean 布尔值  类型的不加引号     isShow:true,

number 数字      类型的不加引号     num:18,

在计算机语言中，大多数单引号表示的是一个字符，双引号表示的是表示一个字符串

前端HTML和Javascript建议统一使用双引号

在{{}}内的双引号内的是字符串
在标签的属性中的双引号内的变量

请详细说下你对vue生命周期的理解

vue生命周期总共分为8个阶段: 创建前/后，载入前/后，更新前/后， 销毁前/后。

  • beforeCreate （创建前）vue实例的挂载元素$el和数据对象 data都是undefined, 还未初始化
  • created (创建后) 完成了 data数据初始化, el还未初始化
  • beforeMount (载入前) vue实例的$el和data都初始化了, 相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
  • mounted (载入后) 在el 被新创建的 vm.$el替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互
  • beforeUpdate (更新前) 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
  • updated （更新后） 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
  • beforeDestroy (销毁前） 在实例销毁之前调用。实例仍然完全可用。
  • destroyed (销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

组件之间的传值通信

组件之间通讯分为三种: 父传子、子传父、兄弟组件之间的通讯
父组件通过props的方式向子组件传递数据，而通过$emit 子组件可以向父组件通信。

  1. 父组件给子组件传值
    使用props，父组件可以使用props向子组件传递数据。

父组件vue模板father.vue:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
    <child :msg="message"></child>
</template>

<script>
import child from './child.vue';
export default {
    components: {
        child
    },
    data () {
        return {
            message: 'father message';
        }
    }
}
</script>

子组件vue模板child.vue:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
    <div>{{msg}}</div>
</template>

<script>
export default {
    props: {
        msg: {
            type: String,
            required: true
        }
    }
}
</script>
  1. 子组件向父组件通信
    父组件向子组件传递事件方法，子组件通过$emit触发事件，回调给父组件。

父组件vue模板father.vue:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
    <child @msgFunc="func"></child>
</template>

<script>
import child from './child.vue';
export default {
    components: {
        child
    },
    methods: {
        func (msg) {
            console.log(msg);
        }
    }
}
</script>

子组件vue模板child.vue:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
    <button @click="handleClick">点我</button>
</template>

<script>
export default {
    props: {
        msg: {
            type: String,
            required: true
        }
    },
    methods () {
        handleClick () {
            //........
            this.$emit('msgFunc');
        }
    }
}
</script>
  1. 非父子, 兄弟组件之间通信
    vue2中废弃了dispatch和broadcast广播和分发事件的方法。父子组件中可以用props和$emit()。如何实现非父子组件间的通信，可以通过实例一个vue实例Bus作为媒介，要相互通信的兄弟组件之中，都引入Bus，然后通过分别调用Bus事件触发和监听来实现通信和参数传递。 Bus.js可以是这样:
    1
    2
    import Vue from 'vue'
    export default new Vue()
    在需要通信的组件都引入Bus.js:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <template>
    	<button @click="toBus">子组件传给兄弟组件</button>
    </template>

    <script>
    import Bus from '../common/js/bus.js'
    export default{
    	methods: {
    	    toBus () {
    	        Bus.$emit('on', '来自兄弟组件')
    	    }
    	  }
    }
    </script>
    另一个组件也import Bus.js 在钩子函数中监听on事件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    import Bus from '../common/js/bus.js'
    export default {
        data() {
          return {
            message: ''
          }
        },
        mounted() {
           Bus.$on('on', (msg) => {
             this.message = msg
           })
         }
       }

ref / refs

访问子组件实例或子元素
尽管存在 prop 和事件，有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的，你可以通过 ref 这个 attribute 为子组件赋予一个 ID 引用。例如：

1
<base-input ref="usernameInput"></base-input>

现在在你已经定义了这个 ref 的组件里，你可以使用：

1
this.$refs.usernameInput

ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例，可以通过实例直接调用组件的方法或访问数据， 我们看一个ref 来访问组件的例子:

// 子组件 A.vue

1
2
3
4
5
6
7
8
9
10
11
12
export default {
  data () {
    return {
      name: 'Vue.js'
    }
  },
  methods: {
    sayHello () {
      console.log('hello')
    }
  }
}

// 父组件 app.vue

1
2
3
4
5
6
7
8
9
10
11
12
<template>
  <component-a ref="comA"></component-a>
</template>
<script>
  export default {
    mounted () {
      const comA = this.$refs.comA;
      console.log(comA.name);  // Vue.js
      comA.sayHello();  // hello
    }
  }
</script>

$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。

Vue
前端基础 Vue

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！