• Vue主要使用-03

       组件通讯 

           组件通讯也是我们需要了解的,在我们的实际开发中,我们使用的非常多,比如父组件内的数据传入到子组件,子组件的数据传入到父组件,什么是父组件什么是子组件？父组件内包含着我们的子组件,我们的父组件可以有多个子组件,父组件就是我们使用子组件拼接的。   

          目前我们还是使用html开发,因为使用模板的话,我们是初步认识vue,需要深入了解

         父传子

              首先我们需要确保我们的定义的组件是没有问题的,我们定义了一个组件 my-aaa 这个是子组件,而我们的父组件就是app这个组件

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<script src="../static/vue.global.js">script>
    7. 	head>
    8. 	<body>
    9. 		<div id="app">
    10. 			<my-aaa>my-aaa>
    11. 		div>
    12. 		<template id="tmp">
    13. 		
    14. 		template>
    15. 		<script>
    16. 			const app=Vue.createApp({
    17. 				
    18. 			 components: {
    19. 			 	"my-aaa":{
    20. 					template:"#tmp",
    21. 				
    22. 				}
    23. 			 },
    24. 			})
    25. 			app.mount("#app")
    26. 		script>
    27. 	body>
    28. html>

          我们想要从父组件传值给子组件,需要给父组件定义一个数据,假如父亲有100元,他要给儿子,他儿子就是 my-son,如何给他呢? 我们需要用到绑定指令,绑定父亲的100元,然后有一个自定义的属性，将父亲的100元赋值给自定义属性 

      可以这样理解：在父亲心里100块钱是钱,而父亲给儿子之后,可能儿子不觉得是钱,而是能买很多东西

       父亲给儿子100块钱,儿子是需要去接住的，所以我们就使用到了 props属性,用于接收外部传来的数据,因为可能不只是一个数据，所以使用数组的形式

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<script src="../static/vue.global.js">script>
    7. 	head>
    8. 	<body>
    9. 		<div id="app">
    10. 			父亲有 {{money}}元 <br>
    11. 			<my-aaa :sonmoney=money>my-aaa>
    12. 		div>
    13. 		<template id="tmp">
    14. 			儿子问爸爸要了{{sonmoney}}元
    15. 		template>
    16. 		<script>
    17. 			const app=Vue.createApp({
    18. 				data(){
    19. 					return{
    20. 						money:1000
    21. 					}
    22. 				},
    23. 			 components: {
    24. 			 	"my-aaa":{
    25. 					template:"#tmp",
    26. 					props:["sonmoney"]
    27. 				}
    28. 			 },
    29. 			})
    30. 			app.mount("#app")
    31. 		script>
    32. 	body>
    33. html>

      子传父

         儿子传给父亲,这时我们是需要有一个点击事件来完成的, 因为定义一个按钮,点击之后,会将这个方法,与父组件的方法绑定

          emits: 我们自定义声明的事件,是需要在emits中声明使用的,也可以不加,但是有时候会报警告

         步骤: 当我们点击按钮时,emit("自定义事件名",参数) 会与我们父组件的getToy进行绑定,点击儿子内的按钮,我们的父组件定义的getToy方法就会生效,在儿子内传的参数在getToy的参数内

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<script src="../static/vue.global.js">script>
    7.  
    8. 	head>
    9. 	<body>
    10. 		<div id="app">
    11. 			父亲的玩具: {{toyson}}
    12. 			<xue-cheng @send-toy="getToy">
    13. 			xue-cheng>
    14. 		div>
    15. 		<template id="son">
    16. 			儿子的玩具: {{toy}} <br>
    17. 			<button @click="$emit('send-toy',toy)">儿子给父亲玩具button>
    18. 		template>
    19. 		<script>
    20. 			const app = Vue.createApp({
    21. 				data() {
    22. 					return {
    23. 						toyson: ""
    24. 					}
    25. 				},
    26. 				methods: {
    27. 					getToy(val) {
    28. 						this.toyson = val
    29. 					}
    30. 				},
    31. 				components: {
    32. 					"xue-cheng": {
    33. 						data() {
    34. 							return {
    35. 								toy: "奥特曼"
    36. 							}
    37. 						},
    38. 						emits: ["send-toy"],
    39. 						template: "#son"
    40. 					}
    41. 				}
    42.  
    43. 			})
    44. 			app.mount("#app")
    45. 		script>
    46. 	body>
    47. html>

    Axios 

           Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

         中文文档 https://www.axios-http.cn/docs/intro

          他与Ajax的使用是很相似的,但是ajax只支持get和post请求,我们的Axios是基本所有的请求都支持的,所以我们需要使用到Axios

       get

         我们直接上案例

        首先我们需要的后端需要先可以获取我们数据,这个参数是我们定义的分页,这里可以和我不一样，只要能访问到数据就可以

     

          首先我们先要使用axios,因为我们是使用html编写的,所以需要有一个axios的包

         这里我们有网的话,可以使用外网导入资源

    <script src="https://unpkg.com/axios/dist/axios.min.js">script>

        这里我们实现的是,点击按钮之后,向后端请求数据,请求成功之后,将数据放入我们定义的数据内,然后进行展示

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<script src="../static/vue.global.js">script>
    7. 		<script src="../static/axios.min.js">script>
    8. 	head>
    9. 	<body>
    10. 		<div id="app">
    11. 			{{empList}}
    12. 			<button @click="getEmp">获取数据button>
    13. 		div>
    14. 		<script>
    15. 			const app = Vue.createApp({
    16. 				data() {
    17. 					return {
    18. 						empList: []
    19. 					}
    20. 				},
    21. 				methods: {
    22. 					getEmp() {
    23. 						axios.get("http://localhost:8082/queryAll", {
    24. 							params: {
    25. 								currPage: 1,
    26. 								pageSize: 2
    27. 							}
    28. 						}).then(res=>{
    29. 							console.log(res)
    30. 							this.empList=res.data.list
    31. 						})
    32. 					}
    33. 				}
    34. 			})
    35. 			app.mount("#app")
    36. 		script>
    37. 	body>
    38. html>

    这里我们可以了解到,我们的axios的使用： axios.请求方式（请求路径,{    配置   }）.then（function (响应){   操作   }）

         

         这里明显是说我们是存在跨域问题的,是浏览器拦截了我们,不让我们进行跨域,这里可以理解为,你要去一个陌生人家里拿东西,难道不会被拦住吗？ 

        出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响

        当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

      这里我们可以在后端解决一下跨域，在你想要跨域的方法上或者类上添加CrossOrigin注解即可

     这就是我们响应的数据,我们想要的数据在data里     

    当我们点击按钮之后会将我们的数据展示出来
     

    post


    如果我们使用post的请求是有一点不一样的，我们就用这个接口请求我们的数据

    首先我们需要知道post请求的传参方式是传的json数据,而我们后端是一个java对象,所以我们需要使用一个注解,将我们的json格式的数据转换成java对象 RequestBody 放在参数前面

     那我们在前端是如何定义一个json数据传到前端呢,我们可以看到与get相比起是不用加params属性的
    1. 	axios.post("http://localhost:8082/add", 
    2.                   {
    3. 						stuname: "niuer",
    4. 						sex: "男"
    5. 					}).then(res=>{
    6. 							console.log(res.data)
    7. 					
    8. 					})

      代表我们已经成功了

    VueRouter 

         客户端路由的作用是在单页应用 (SPA) 中将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面时，URL 会随之更新，但页面不需要从服务器重新加载

        Vue Router 基于 Vue 的组件系统构建，可以通过配置路由来告诉 Vue Router 为每个 URL 路径显示哪些组件

       首先我们先定义两个组件,当我们点击 a的时候出现 A组件,当点击b的时候出现B组件

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<script src="../static/vue.global.js">script>
    7. 	head>
    8. 	<body>
    9. 		<div id="app">
    10. 		div>
    11. 		<template id="a">
    12. 			<h1>这是一个组件Ah1>
    13. 		template>
    14. 		<template id="b">
    15. 			<h1>这是一个组件Bh1>
    16. 		template>
    17. 		<script>
    18. 			const app = Vue.createApp({
    19. 			 	
    20. 			})
    21. 			app.mount("#app")
    22. 		script>
    23. 	body>
    24. html>

           我们是需要通过配置路由来告诉 Vue Router 为每个 URL 路径显示哪些组件，要使用路由需要引入vue的路由资源,我们的路由不可能是有一个路由的,我们需要根据格式来编写配置路由,如果监听到你要去 /a的话,就给你展示a组件,b组件也是

    1. const router=VueRouter.createRouter({
    2. 				history:VueRouter.createWebHashHistory(),
    3. 				routes:[
    4. 					{
    5. 						path:"/a",
    6. 						component:{
    7. 							template:"#a"
    8. 						}
    9. 					},
    10. 					{
    11. 					path:"/b",
    12. 					component:{
    13. 						template:"#b"
    14. 					}	
    15. 					}
    16. 				]
    17. 			})

       不同于常规的  标签，我们使用组件 RouterLink 来创建链接。这使得 Vue Router 能够在不重新加载页面的情况下改变 URL，处理 URL 的生成、编码和其他功能,RouterLink的本意还是a标签,

      RouterView 组件可以使 Vue Router 知道你想要在哪里渲染当前 URL 路径对应的路由组件。它不一定要在 App.vue 中，你可以把它放在任何地方，但它需要在某处被导入，否则 Vue Router 就不会渲染任何东西。

         当你点击a这个a标签的时候,Vue的路由会监听到你要去到 /a 下,/a在你配置的路由中,指向了一个组件,他会给你展示那个组件,但是要展示在哪里也是需要你自己定义,使用RouterView

    1. 	<div id="app">
    2. 			 <router-link to="/a">aroute-link> <br>
    3. 			 <router-link to="/b">broute-link>
    4. 			  <router-view>route-view>
    5. 		div>

  • 相关阅读:
    Spring AOP实现 | 代理模式分析
    elasticsearch wildcard 慢查询原因分析(深入到源码!!!)
    如何高效安装MindSpore的GPU版本
    （十二）笔记MQ学习之优劣介绍
    JavaScript 63 JavaScript 对象 63.1 JavaScript 对象定义
    板子内存不够可使用gdbserver+gdb+VSCode工具调试(平台基于rv1126)
    【技术分享】Python脚本实现BJTU校园网自动登录
    vue2+element-ui实现一个注册表单
    Python基础 – 使用别人代码的模块机制
    应用层DDoS防护：理解、必要性与实现策略
  • 原文地址：https://blog.csdn.net/m0_74353020/article/details/139645797