Vue3杂碎知识记录

vue引入bootstrap

当卸载App.vue里不行的时候就还可以写在main.js里
导入bootstrap的时候写在main.js里，(还要添加依赖@popperjs/core)

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap'; // 注意js文件也要引入进来

写在vue的script里面不行，要写在main.js里来导入bootstrap

NavBar无刷新跳转

NavBar.vue中的<a href="#">text</a>标签全替换成<router-link :to="#">text</router-link >就好

vue父组件与子组件数据交互

父组件向子组件传递信息用props(子组件使用props接受传过来的数据)

ParentView.vue:

<template>
	<ChildrenView :FromParentMassage="FromParentMassage" />
</template>

<script>
import ChildView from '../components/ChildView.vue';

export default {
	components: {
		ChildView,
	},
	setup(){
		const FromParentMassage = reactive({
			massage:"hello!",
		});
	},
	return { // 所有需要用到的都要return出去
		FromParentMassage, // FromParentMassage: FromParentMassage, 如果return的值和key一样，只写一个就可以.
	}
}
</script>

ChildrenView.vue:

<template>
  <div>
    <p>{{ messageFromParent }}</p>
	<!-- messageFromParent对象已经接受过来，可以直接调用就行 -->
  </div>
</template>

<script>
export default {
  name: 'ChildrenView',
  props: {
    messageFromParent:{ // 使用props接受父组件传过来的信息
	  type: Object,
	  required: true,
	},
  },
};
</script>

子组件向父组件传递数据使用绑定事件

<form @submit.prevent="login">

当表单被提交时，调用Vue实例中的login方法，并阻止浏览器默认的表单提交行为，从而避免页面的刷新或跳转。这通常用于通过异步方式处理表单提交，比如使用AJAX请求向服务器发送数据而不重新加载整个页面。(解释来自chatgpt3.5)