脚手架安装，组件通讯（5.27-5.30）

最新推荐文章于 2024-08-02 23:07:48 发布

余心不忍

最新推荐文章于 2024-08-02 23:07:48 发布

阅读量91

点赞数

文章标签： npm vue.js javascript

本文链接：https://blog.csdn.net/weixin_49088708/article/details/125083701

版权

脚手架安装

1.脚手架搭建项目，需要安装Node.js，这里我们一共装了三个，npm、cnpm、yarn。

（1）npm安装vue，首先安装好Node.js,然后建立文件夹，打开命令窗口，输入npm install -g @vue/cli （install=>安装 -g=>全局 vue/cli => vue的脚手架），回车等待安装，安装好后即可创建npm脚手架。

打开文件夹，进入命令窗口，cd +文件名进入指定文件夹，输入 vue create '自定义文件名' 回车创建。然后选择对应语言，Vue2还是Vue3，在对应文件夹内会出现新创建的脚手架文件，如是想要运行，则还需要输入运行码，npm run serve 。

（2）cnpm创建

1.淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org。

2.后续和npm相同，若以前安装过vue/cli脚手架就不需要在装一次，直接到创建脚手架的步骤即可。

（3）yarn创建

1.npm install -g yarn，输入该指令

2.yarn config set registry https://registry.npm.taobao.org

3.脚手架以安装，无需重复，直接创建文件，vue create +名称，选择语言（vue2），然后选择yarn或者npm（已安装了npm的），进入，运行，后续步骤同1。区别：运行代码：yarn serve

组件通讯

组件有父子区分，子组件被父组件包含。

脚手架中父组件App.vue

子组件是component文件夹中的vue文件。

父子组件需要使用import和export导入导出来链接两者。

1.父传子

父组件中的data中的信息传入子组件使用，代码中有父组件引入子组件的步骤。

<template>
	<div id="app">
		<img alt="Vue logo" src="./assets/logo.png"><!-- 根组件里的图片 -->
		<!-- 第三步 -->
		<!-- <headerOne></headerOne> -->
		<!-- 单边结尾也行 -->

		<!-- <headerOne/> -->
		<!-- <header-one></header-one> -->

		<!-- 这里标签的名字是根据下面的components里的键值对来改变的 -->
		<www :msg="message" :></www><!-- 使用组件 -->
	</div>
</template>

<script>
	//components专门存放组件的文件夹
	import headerOne from './components/headerOne.vue' //引入的第一步
	export default {
		name: 'App',
		data() {
			return {
				message: '张三',
				movies: ['赵六', '王五', '李四', '张三']
			}
		},
		//检查组件      这里用法以局部注册为主，局部的加上s，全局不用
		components: { //第二步（注册组件），写在这里是因为本身就是写在new Vue中的，而这里的本身要被引入main.js中挂载，所以是一个意思
			www: headerOne
		}
	}
</script>

v-bind动态绑定message，以下是子组件，子组件使用props接受父组件传来的数据。

<template>
	<!-- template是模板的意思 写的是HTML -->
	<div>
		<div>头部,我是头部的头，一个大头</div>
		<div>暴露第二个</div>
		<h2>{{msg}}</h2>
	</div>
	

</template>

<script>
	// js
	export default {//导出这个组件，该文件夹就是放components的组件的，再由app.vueimport接受
		name: 'headerOne',
		props:{
			//用户props接受父组件传来的msg,不能直接改变值 
			msg:{
				type:String
			}
	}
</script>

接受的数据使用对象键值对形式输入类型，若是可能有多种类型的需要加上【】。动态属性需要加上中括号，（注意template标签中不能暴露多个标签，只能有一个根标签，所以需要用一个div标签包住）

2.子传父

新建一个子组件，输入export default导出，在父组件中import接受，在用上述代码中的步骤引用，在template中写好标签，父组件会渲染。

注意需要传递数据或方法时，在子组件中使用$emit派发一个方法，在用v-on接受该方法，同时使用methods再次创建一个方法使用。

3.父子相传

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app"><!-- 这里是父组件 -->
			<h2>父组件</h2>
			<p>num1:{{num1}}</p>
			<input type="text" v-model="num1">
			<p>num2:{{num2}}</p>
			<input type="text" v-model="num2">
			<hr>
			<!-- 子组件调用 -->
			<h2>子组件</h2>
			<cpnc  :number1="num1" :number2="num2" @changenum1="num1change" @changenum2="num2change"></cpnc>
		</div>
		
		<script src="vue.js"></script>
		<template id="cpnc">
			<div>
<!-- 这里出现dnumber没有随着父组件的改变变化是因为没有监听，number的变化，实际上的情况是number已经改变了，但是dnumber没有变 -->
<!-- number是绑定num上的，下列的data没有实现响应式 卡可以通过监听number的情况来改变dnumber -->
				<h4>dnumber1:{{dnumber1}}</h4>
				<h4>number1:{{number1}}</h4>
				<input type="text" v-model="dnumber1">
				<h4>dnumber2:{{dnumber2}}</h4>
				<h4>number2:{{number2}}</h4>
				<input type="text" v-model="dnumber2">
				
			</div>
		</template>
		<script type="text/javascript">
			const vm = new Vue({
				el:'#app',
				data(){
					return{
						num1 : 1,
						num2 : 2
					}
				},
				components:{
					cpnc:{
						template:'#cpnc',
						data(){
							return{// 1.尽量不要直接使用props接受的值进行渲染,每次使用都会报错，尽管效果能实现
								dnumber1:this.number1,
								dnumber2:this.number2
							}
						},
						props:{
							number1:{
								type:[Number,String]//2.这里的number想要输入的是数字要加修饰符number，这里的type是动态的属性，本来是number，改变后就是string，所以是俩两种，动态的加上中括号。
							},
							number2:{
								type:[Number,String]//接受的数据类型可以是多个的例如此处
							}
						},
						watch:{
							number1(newval){//监听number，改变dnumber
								this.dnumber1 = newval
							},
							number2(newval){
								this.dnumber2 = newval
							},
							dnumber1(val){//方法能写，watch也能写
								this.$emit('changenum1',val)
							},
							dnumber2(val){
								this.$emit('changenum2',val)
							}
						}
					}
				},
				methods:{
					num1change(val){
						this.num1 = val
					},
					num2change(val){
						this.num2 = val
					}
				},
				computed:{
					
				},
				watch:{
					
				}
			})
			
			// 组件通讯方式（共有六种）主要注意1.props和$emit，2.$parent和$children记得即可
			
			
		</script>
	</body>
</html>

思路：首先，这里的组件是局部组件，创建一个cpnc的组件，先给父组件的样式和data设置好，将子组件中的template标签里的内容写好，最后放入父组件中调用。将渲染的数据和input文本框双向绑定。然后使用父传子的方法将父组件的data传入子组件的data中，使用props接受，接受时注意，在input写出的数字是字符串类型，所以接受时需要注意data的类型是动态的，需要两者都写并加上中括号。这样子组件的data会随着父组件的变化改变，但是效果实现的同时后台会出现报错。不要对props接受的值直接渲染，这是报错的原因。需要一个值来过度这种直接的改变。

此时可以通过未完成的页面展示看出，过度值dnumber没有发生响应式的改变，只有number改变，所以需要对number进行监听，当number改变时，同时改变dnumber。

此时完成了父传子，还需要实现子传父，还是上面提到的方法，$emit派发一个方法，在watch中写或者methods中都行，写出一个方法，派发出去，在传出一个当前值。派发后使用父组件的方法接受，将传入的当前值赋值给父组件的data，最终实现改变子组件的值父组件同步改变。

实现了父子间的相互通讯。