Vue.js 组件间值传递(props)

2021-11-28
V2

本文最后更新于2022.05.14-16:18，某些文章具有时效性，若有错误或已失效，请在下方留言或联系涛哥。

1，props的三种接收方法

简单接收

子组件配置

<template>
    <div class="item">
			<h2>{{title}}</h2>
			<p>{{content}}</p>
			<hr>
			<span>{{aouthor}}</span>
			<span>{{views}}</span>
			<span>{{msg}}</span>
			<span>{{time}}</span> 
		
		</div>
</template>

<script>
export default {
    name:'BlogItem',
    props:['title','content','aouthor','views','msg','time']//简单接收
}
</script>

<style>
    .item{
				width: 740px;
				height: 145px;
				background-color: #fff;
				border-radius: 2px;
				padding: 5px 20px;
			}
			.item h2{
				color: #657180;
				margin: 0;
				margin-top: 15px;
			}
			.item p{
				width: 90%;
				color: #98a6ad;
				font-size: 12px;
			}
			.item hr{
				background-color: #eee!important;
				color: #666!important;
				height: 1px;
				margin: 10px 0;
				border: 0;
				clear: both;
			}
			.item span{
				color: #98a6ad;
				font-size: 10px;
			}
			.item a{
				float: right;
				color: #98a6ad;
				text-decoration: none;
				font-size: 10px;
				margin: 0;
			}
			.item a:hover{
				text-decoration: underline;
			}
</style>

父组件配置

<template>
  <div id="app">
      <BlogItem class="myItem" v-for="item in items" :key="item.id" 
      :title="item.title" 
      :content="item.content" 
      :aouthor="item.aouthor"
      :views="item.views" 
      :msg="item.msg" 
      :time="item.time"/>

  </div>
</template>

<script>
//引入组件
import BlogItem from './components/BlogItem.vue'

export default {
  name: 'App',
  components: {//注册组件
    BlogItem
  },
  data () {
    return {
      items:[
        {id:1,title:'标题1',content:'副标题1',aouthor:'张三',views:51,msg:9,time:'2019-1-1'},
        {id:2,title:'标题2',content:'副标题2',aouthor:'四',views:541,msg:9,time:'2018-1-1'},
        {id:3,title:'标题3',content:'副标题3',aouthor:'王五',views:41,msg:5,time:'2019-2-1'},
        {id:4,title:'标题4',content:'副标题4',aouthor:'赵六',views:81,msg:9,time:'2015-1-1'},
      ]
    }
  }
}
</script>

<style>
body{
  background-color: black;
}
#app {
 width: 760px;
 margin: 0 auto;
}
.myItem{
  margin-top: 10px;
}
</style>

一般接收（）

子组件配置

<template>
    <div class="item">
			<h2>{{title}}</h2>
			<p>{{content}}</p>
			<hr>
			<span>{{aouthor}}</span>
			<span>{{views}}</span>
			<span>{{msg}}</span>
			<span>{{time}}</span>
			<a href="">阅读全文</a>
		</div>
</template>

<script>
export default {
    name:'BlogItem',
	 props:{//一般接收（会报错不会拦截）
	 	title:String,
	 	content:String,
	 	aouthor:String,
	 	views:Number,
	 	msg:Number,
	 	time:String,
	}
	//7种类型 字符串String 数字Number 布尔Boolean 数组Array 对象Object 函数Function 自定义函数Promise
}
</script>

<style>
    .item{
				width: 740px;
				height: 145px;
				background-color: #fff;
				border-radius: 2px;
				padding: 5px 20px;
			}
			.item h2{
				color: #657180;
				margin: 0;
				margin-top: 15px;
			}
			.item p{
				width: 90%;
				color: #98a6ad;
				font-size: 12px;
			}
			.item hr{
				background-color: #eee!important;
				color: #666!important;
				height: 1px;
				margin: 10px 0;
				border: 0;
				clear: both;
			}
			.item span{
				color: #98a6ad;
				font-size: 10px;
			}
			.item a{
				float: right;
				color: #98a6ad;
				text-decoration: none;
				font-size: 10px;
				margin: 0;
			}
			.item a:hover{
				text-decoration: underline;
			}
</style>

父组件配置

<template>
  <div id="app">
       <BlogItem id="BlogItem" class="myItem" v-for="item in items" 
       :key="item.id"  
      :myItem="item"/>
      <h1 id="title" ref="title">{{msg}}</h1>
      <button @click="show">获取标签内容</button>
  </div>
</template>

<script>
//引入组件
import BlogItem from './components/BlogItem.vue'

export default {
  name: 'App',
  components: {//注册组件
    BlogItem
  },
  data () {
    return {
      msg:'ref的讲解',
      items:[
        {id:1,title:'标题1',content:'副标题1',aouthor:'张三',views:51,msg:9,time:'2019-1-1'},
        {id:2,title:'标题2',content:'副标题2',aouthor:'李四',views:541,msg:9,time:'2018-1-1'},
        {id:3,title:'标题3',content:'副标题3',aouthor:'王五',views:41,msg:5,time:'2019-2-1'},
        {id:4,title:'标题4',content:'副标题4',aouthor:'赵六',views:81,msg:9,time:'2015-1-1'},
      ]
    }
  }
}
</script>

<style>
body{
  background-color: black;
}
#app {
 width: 760px;
 margin: 0 auto;
}
.myItem{
  margin-top: 10px;
}
</style>

完整接收

子组件配置

<template>
    <div class="item">
			<h2>{{title}}</h2>
			<p>{{content}}</p>
			<hr>
			<span>{{aouthor}}</span>
			<span>{{views}}</span>
			<span>{{msg}}</span>
			<span>{{time}}</span>
		</div>
</template>

<script>
export default {
    name:'BlogItem',
	props:{
		title:{//完整接收
			type:String,
			required:true//必须传递参数
		},
		content:String,
		aouthor:String,
		views:{
			type:Number,
			default:0//默认值为0
		},
		msg:Number,
		time:String
	}



}
</script>

<style>
    .item{
				width: 740px;
				height: 145px;
				background-color: #fff;
				border-radius: 2px;
				padding: 5px 20px;
			}
			.item h2{
				color: #657180;
				margin: 0;
				margin-top: 15px;
			}
			.item p{
				width: 90%;
				color: #98a6ad;
				font-size: 12px;
			}
			.item hr{
				background-color: #eee!important;
				color: #666!important;
				height: 1px;
				margin: 10px 0;
				border: 0;
				clear: both;
			}
			.item span{
				color: #98a6ad;
				font-size: 10px;
			}
			.item a{
				float: right;
				color: #98a6ad;
				text-decoration: none;
				font-size: 10px;
				margin: 0;
			}
			.item a:hover{
				text-decoration: underline;
			}
</style>

父组件配置

<template>
  <div id="app">
      <BlogItem class="myItem" v-for="item in items" :key="item.id" 
      :title="item.title" 
      :content="item.content" 
      :aouthor="item.aouthor"
      :views="item.views" 
      :msg="item.msg" 
      :time="item.time"/>
  </div>
</template>

<script>
//引入组件
import BlogItem from './components/BlogItem.vue'

export default {
  name: 'App',
  components: {//注册组件
    BlogItem
  },
  data () {
    return {
      msg:'ref的讲解',
      items:[
        {id:1,title:'标题1',content:'副标题1',aouthor:'张三',views:51,msg:9,time:'2019-1-1'},
        {id:2,title:'标题2',content:'副标题2',aouthor:'李四',views:541,msg:9,time:'2018-1-1'},
        {id:3,title:'标题3',content:'副标题3',aouthor:'王五',views:41,msg:5,time:'2019-2-1'},
        {id:4,title:'标题4',content:'副标题4',aouthor:'赵六',views:81,msg:9,time:'2015-1-1'},
      ]
    }
  }
}
</script>

<style>
body{
  background-color: black;
}
#app {
 width: 760px;
 margin: 0 auto;
}
.myItem{
  margin-top: 10px;
}
</style>

2,方法传递

学校案列

app.vue

<template>
  <div id="app">
   <School :addStu="addStu"></School>
   <Student  v-for="stu in students" :key="stu.id" :stu="stu"></Student>
  </div>
</template>

<script>
//引入组件
import School from './components/School.vue'
import Student from './components/Student.vue'
export default {
  name: 'App',
  components: {//注册组件
    School,
    Student
  },data(){
      return{
          students:[
            {id:1,name:'yk',age:18,sex:'男'},
            {id:2,name:'yk',age:18,sex:'男'}
          ]
      }
  },methods:{
      addStu(stu){
          this.students.unshift(stu);
      }
  }
}
</script>

<style scoped>
.myList{
  margin-top: 25px;
}
.bgcolor{
    background-color: yellow;
}
</style>

student.vue

<template>
  <div>
      <h1 >姓名：{{stu.name}}  年龄：{{stu.age}}  性别：{{stu.sex}}</h1>
  </div>
</template>

<script>
export default {
name:'Student',
props:['stu']
}
</script>

<style scoped>

</style>>

</style>

school.vue

<template>
  <div>
      <h1>希望小学</h1>
      姓名：<input type="text" v-model="name"><br>
      年龄：<input type="number" v-model="age"><br>
      性别：<input type="text" v-model="sex">
      <button @click="add()">添加学生</button>
  </div>
</template>

<script>
import { nanoid } from "nanoid"
export default {
name:'School',
props:['addStu'],
data(){
    return{
        name:'',
        age:0,
        sex:''
    }
},
methods:{
    add(){
        const student={id:nanoid(),name:this.name,age:this.age,sex:this.sex};
        this.addStu(student);
    }
}
}
</script>

<style scoped>

</style>>

</style>
阅读剩余
版权声明：
作者：涛哥
链接：https://ltbk.net/front/vue/v2/article/144.html
文章版权归作者所有，未经允许请勿转载。
THE END
CSShtmlvue.js
Vue在浏览器安装Vue Devtools的两种方法
<<上一篇
mixin混入混合和局部样式
下一篇>>
相关推荐
Vue.js之自定义指令
Vue三级路由不跳转解决方案以及动态路由
Vue 搭建部署迷你服务器和打包上线项目
ElementUi的使用
vue 路由守卫和实现在新窗口打开
vue 二级路由和路由传参
解决vue Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.和ERROR in Cannot find module 'node-sass'
websocket聊天室
本站稳定运行