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

smallcelebration

已于 2023-04-24 10:09:22 修改

阅读量812

点赞数

文章标签： vue.js elementui javascript

于 2022-02-07 19:18:02 首次发布

本文链接：https://blog.csdn.net/samllucky/article/details/122797557

版权

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

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

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

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

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

4.使用组件：在当前组件中使用<Student/>组件标签

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

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

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

使用方式：

1. 打标识：```<h1 ref="xxx">.....</h1>``` 或 ```<School ref="xxx"></School>```

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

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

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

4.子向父传值：

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

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

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

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

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

//父组件中代码  给子组件自定义atguigu事件
<Student @atguigu="getStudentName" />
//在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)
	<Student ref="student"/>
	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传递给父组件<template> <div class="initail"> <ul> &l...https://blog.csdn.net/zyz00000000/article/details/84824623

//安装全局事件总线
import Vue from "vue"
import App from "./App.vue"

Vue.config.productionTip=false

new Vue({
	el:'#app',
	render:h=>h(App),
	beforeCreate(){
		Vue.prototype.$bus=this//安装全局事件总线
	}
})

//发送数据方组件  this.$bus.$emit('aiguigu',this.name)

	methods:{
			sendStudentName(){
				this.$bus.$emit('hello',this.name)
			}
		}

//接收数据方组件  this.$bus.$on('hello',(data)=>{ 收到事件data//自定义事件回调})
	mounted() {
			// console.log('School',this)
			this.$bus.$on('hello',(data)=>{
				console.log('我是School组件，收到了数据',data)
			})
		},
//最好在销毁组件之前，解绑自定义事件
		beforeDestroy() {
			this.$bus.$off('hello')
		},
	}

7.消息的发布订阅pubsub-js

以下是详细用法

vue组件间的通信之pubsub-js - 显示账号 - 博客园本文介绍使用发布订阅的方式进行vue组件间的通信我认为这种方式比较自由，不存在组件间的关系问题 1. 首先安装pubsub-js npm install --save pubshttps://www.cnblogs.com/z-qinfeng/p/12387268.html1.npm install --save pubsub-js

2.import pubsub form “pubsub-js”

3.订阅消息pubsub.subscribe('频道'，(数据)=>{//回调}) （beforeDestroy中pubsub.unsubscribe(pubId)）见下方示例

	mounted() {
			// console.log('School',this)
			/* this.$bus.$on('hello',(data)=>{
				console.log('我是School组件，收到了数据',data)
			}) */
			this.pubId = pubsub.subscribe('hello',(msgName,data)=>{
				console.log(this)
				// console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
			})
		},
		beforeDestroy() {
			// this.$bus.$off('hello')
			pubsub.unsubscribe(this.pubId)
		},

4.发布消息pubsub.publish('频道'，数据)

8.开启代理服务器Vue.config.js

配置参考 | Vue CLIhttps://cli.vuejs.org/zh/config/#devserver-proxy

//开启代理服务器（方式一）
	/* devServer: {
    proxy: 'http://localhost:5000'
  }, */
	//开启代理服务器（方式二）
	devServer: {
    proxy: {
      '/atguigu': {
        target: 'http://localhost:5000',
				pathRewrite:{'^/atguigu':''},
        // ws: true, //用于支持websocket
        // changeOrigin: true //用于控制请求头中的host值
      },
      '/demo': {
        target: 'http://localhost:5001',
				pathRewrite:{'^/demo':''},
        // ws: true, //用于支持websocket
        // changeOrigin: true //用于控制请求头中的host值
      }
    }
  }

9.vue-resource发起请求（与axios作用相同）

vue-resource基本使用方法 - 古兰精 - 博客园一、vue-resource特点 1、体积小：vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。 2、支持主流https://www.cnblogs.com/goloving/p/8665421.html

10.插槽的使用

1.插槽：在组件中可以用<slot>标签占位，挖一个坑留着，在使用组件标签时，用双标签，往里面去填充内容，从而达到组件可以多样化的效果

2.具名插槽：

//组件中代码  有两个插槽  所以给name属性区别出插槽
<div class="category">
		<h3>{{title}}分类</h3>
		<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
		<slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现1</slot>
		<slot name="footer">我是一些默认值，当使用者没有传递具体结构时，我会出现2</slot>
	</div>


//使用组件的位置   可以使用template标签—+  v-slot：footer 
<Category title="电影">
<video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
			<template v-slot:footer>
				<div class="foot">
					<a href="http://www.atguigu.com">经典</a>
					<a href="http://www.atguigu.com">热门</a>
					<a href="http://www.atguigu.com">推荐</a>
				</div>
				<h4>欢迎前来观影</h4>
			</template>
		</Category>

//或者   直接slot="footer"  直接等于对应的slot标签名
<Category title="游戏" >
			<ul slot="center">
				<li v-for="(g,index) in games" :key="index">{{g}}</li>
			</ul>
			<div class="foot" slot="footer">
				<a href="http://www.atguigu.com">单机游戏</a>
				<a href="http://www.atguigu.com">网络游戏</a>
			</div>
		</Category>

3.作用域插槽：数据也在组件中，不在使用者身上，当使用者需要拿到组件中的数据时，可以通过给<slot>标签添加自定义属性传值给使用者，在父组件中<template scope="{自定义属性}">通过解构赋值得到该数据

//子组件中slot标签自定义属性传值
<template>
	<div>
		<slot :games="games" msg="hello">我是一些默认内容</slot>
	</div>
</template>

<script>
export default {
	name:'Category',
	props:['title'],
	date(){
		return {
		games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
		}
	}
}
</script>
//父组件中 template标签上  scope=“{games}”  或  slot-scope="{games}"

		<Category title="游戏">
			<template scope="atguigu">
				<ul>
					<li v-for="(g,index) in atguigu.games" :key="index">{{g}}</li>
				</ul>
			</template>
		</Category>

//slot-scope="{games}"
		<Category title="游戏">
			<template slot-scope="{games}">
				<h4 v-for="(g,index) in games" :key="index">{{g}}</h4>
			</template>
		</Category>

11.vuex：状态管理构架

VueX 是一个专门为 Vue.js 应用设计的状态管理构架，统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。

Vuex有五个核心概念：

　　state, getters, mutations, actions, modules。

　　1. state：vuex的基本数据，用来存储变量 //this.$store.state.xxx 获取值

　　 2. getter：从基本数据(state)派生的数据，相当于state的计算属性

　　 3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。this.$store.commit

　　回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。

　　 4. action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。this.$store.dispatch

　　 5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

模块化：方法一使用mapState等

import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		computed:{
			//借助mapState生成计算属性，从state中读取数据。（数组写法）
			...mapState('countAbout',['sum','school','subject']),
			...mapState('personAbout',['personList']),
			//借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
			...mapGetters('countAbout',['bigSum'])
		},
		methods: {
			//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
			...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
			//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
			...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
		},
		mounted() {
			console.log(this.$store)
		},

模块化：方法二（使用this.$store）

27.vue组件间完整传值方式代理服务器插槽 vuex 路由按需加载_vuex modules太多可以按需加载_smallcelebration的博客-CSDN博客1、首先组件的使用步骤：1.创建组件.vue文件，组件名name（首字母大写）2.引入组件：import Student from "./components/Student.vue" （script标签下）3.注册组件：当前组件name属性与date平级，components注册局部组件{Student}4.使用组件：在当前组件中使用<Student>组件标签constcomp=Vue.extends({创建组件})2、使用ref属性：被用来给元素或子组件注册引用信..https://blog.csdn.net/samllucky/article/details/122797557

12.路由按需加载：三种方法

vue项目实现路由按需加载(路由懒加载)的3种方式_岁末zzz的博客-CSDN博客_vue路由按需加载1. vue异步组件技术vue-router配置路由，使用vue的异步组件技术，可以实现按需加载。但是，这种情况下一个组件生成一个js文件。举例如下：{ path: '/promisedemo', name: 'PromiseDemo', component: resolve => require(['../co...https://blog.csdn.net/weixin_43953710/article/details/103027683?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-1.pc_relevant_aa&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-1.pc_relevant_aa&utm_relevant_index=2

smallcelebration

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
27.vue组件间完整传值方式代理服务器插槽 vuex 路由按需加载

1、首先组件的使用步骤：1.创建组件.vue文件，组件名name（首字母大写）2.引入组件：import Student from "./components/Student.vue" （script标签下）3.注册组件：当前组件name属性与date平级，components注册局部组件{Student}4.使用组件：在当前组件中使用<Student>组件标签constcomp=Vue.extends({创建组件})2、使用ref属性：被用来给元素或子组件注册引用信..
复制链接

扫一扫