vue高级属性（一）

VUE高级特性

一：bus传参

新建一个js文件，命名为bus.js。bus.js文件的内容为：

// 导入vue
import  Vue from 'vue';
// 创建vue的实例
 var bus = new Vue();
 // 导出实例
 export default bus;

页面demo.vue包含两个组件 a.vue和b.vue
a.vue执行一个事件，传递数据到b.vue 或者b.vue执行一个事件，传递数据到a.vue
举例：a.vue执行事件传递数据到b.vue：
首先：
在a.vue和b.vue分别引入bus.js
其次：
发送信息

import bus from '@/utils/bus.js'

a.vue执行事件($emit 发布命令)
第一个参数为标志变量，第二个参数为通信的值

aClick(item){
   
	bus.$emit('SteperView',item)
}

接收信息:

import bus from '@/utils/bus'

b.vue接收事件($on 接收命令)
第一个参数为标志变量，第二个参数中的item为通信的值

bus.on('SteperView',item => {
   
	//执行操作
})

二：跨组件传参

Vue 的组件作用域都是孤立的，不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。
首先用 vue-cli 创建一个项目，其中 App.vue 是父组件，components 文件夹下都是子组件。

1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit 触发父组件的自定义事件。

一、父组件向子组件传递数据

在 Vue 中，可以使用 props 向子组件传递数据。
子组件部分：

<template>
	<div class="about">
		{
   {
   mynum}}
		<hr>
		<ul style="text-align: left;">
			<li v-for="(item,index) in list" :key="index">{