27.vue组件间完整传值方式 代理服务器 插槽 vuex 路由按需加载

1、首先组件的使用步骤：

使用nanoid生成独一无二的id比uuid更加轻量

1.创建组件.vue文件，组件名name（首字母大写）

2.引入组件：import Student from "./components/Student.vue" （script标签下）

3.注册组件：当前组件name属性与data平级，components注册局部组件{Student}

4.使用组件：在当前组件中使用组件标签

const comp=Vue.extends({ 创建组件})

2、使用ref属性：被用来给元素或子组件注册引用信息（id的替代者）

 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）

使用方式：

    1. 打标识：```

.....

``` 或 ``````

     2. 获取：```this.$refs.xxx```   获取实例，获取数据

3.父向子传值：使用自定义属性props传参

在子组件标签上自定义属性，子组件props:['xxx','sss'],或者props:{"xxx":{type:number,default:0}}

4.子向父传值：

1.通过父组件给子组件传递 函数类型（一个函数） 的props：（扩展）

	1.父组件通过属性传递一个函数给子组件

    //父组件中代码
	
	methods: {
			getSchoolName(name){
				console.log('App收到了学校名：',name)
			}
		}

     //子组件中代码
		props:['getSchoolName'],
     //在某methods里面的函数里面调用该函数
	  this.getSchoolName(this.name)//传递一个子组件中的数据name

2.通过父组件给子组件绑定一个自定义事件实现：（第一种写法，使用@或v-on）

//父组件中代码  给子组件自定义atguigu事件

//在methods中定义时间
	getStudentName(name,...params){
	console.log('App收到了学生名：',name,params)
	this.studentName = name
			},

//子组件中 通过this.$emit('atguigu',this.name)
	sendStudentlName(){
				//触发Student组件实例身上的atguigu事件
				this.$emit('atguigu',this.name,666,888,900)
				// this.$emit('demo')
				// this.$emit('click')
			},

3.通过父组件给子组件绑定一个自定义事件实现：（第二种写法，使用ref）

父组件中this.$refs.student.$on('自定义事件名',function)

//父组件给子组件 打上ref标识 定义自定义事件	this.$refs.student.$on('atguigu',function)
	
	mounted() {
			this.$refs.student.$on('atguigu',this.getStudentName) //绑定自定义事件
// this.$refs.student.$once('atguigu',this.getStudentName) //绑定自定义事件（一次性）
		},

        getStudentName(name,...params){
				console.log('App收到了学生名：',name,params)
				this.studentName = name
			},


//子组件中  去触发组件上的自定义事件this.$emit('atguigu',this.name)

解绑自定义事件：在子组件内部解绑this.$off('atguigu')

销毁当前组件实例：this.$destroy()

	unbind(){
    this.$off('atguigu') //解绑一个自定义事件
	// this.$off(['atguigu','demo']) //解绑多个自定义事件
	// this.$off() //解绑所有的自定义事件
			},
	death(){
	this.$destroy() //销毁了当前Student组件的实例，销毁后所有Student实例的自定义事件全都不奏效。
			}

5.sessionstorage/localStorage:只能存储字符串

localStorage.setItem('token',JSON.Stringfy())  JSON.parse(localStorage.getItem('token'))

6.全局事件总线传参（Vue.prototype.$bus=this或new Vue()）//组件都能访问到$bus

***********************注意：使用的局限性***************************

总之，监听bus总线的事件，必须要函数中，但是该函数执行的时候，跟bus总线无关。

路由组件中：两个组件不在一个页面，bus总线即使改变了值，当点击另一个路由路径的时候，data函数又将值初始化了，

所以说，bus总线作用的两个组件应该在同一页面中。当然，可以用一个仓库来存储这个改变的值，比如：vuex、webStorage、数据库等等。

vue中兄弟组件之间的联动，兄弟组件之间的传值_叨唠的博客-CSDN博客_vue兄弟组件传值兄弟组件之间的传值，使得兄弟组件之间可以联动，相互操作方法1：借助父组件，让两个兄弟组件可以联动，子组件A将值传递给父组件，父组件再将值传递给子组件B第一步：子组件A传值给父组件通过$emit将e.target.innerText传递给父组件