一:props父组件给子组件传输
App.vue
<template>
<div id="app">
<div>
<!--:age :就是v-bind 它会读取18 而不是 "18" 字符串 这样不能做数字加减-->
<school :age="18" stylemodel="good的好学校"></school>
</div>
</div>
</template>
<script>
//es6中模块化的引入方式
import school from './components/school.vue'
<script/>
注意: :age="18"
这里因为age是int类型,所以age前加 :是为了表示读取的数字18而不是字符串"18"。
school.vue
<template>
<!--demo为样式准备的-->
<div class="demo">
<!--age实现加一-->
<h2>学校age:{{age+1}}</h2>
<h2>学校style:{{stylemodel}}</h2>
</div>
</template>
<script>
//es6中模块化的引入方式
import student from './student.vue'
//------------------------------------------------------------
//这样写法更加简洁,这样用的多
export default {
//代表组件名称,最好与 school.vue中的school一致
name:'school',
data(){
return{
}
}
//高级格式
props:{
age:{
//对age类型限制,如果传过来类型不一致则报错
type:Number,
//required:true required和default不能同时存在
default:10 //默认值限制
},
stylemodel:{
type:String,
required:true //必要值得限制
}
}
}
</script>
props三种方法:
1.最简单格式: props:['age','stylemodel']
2.较复杂格式:
props:{
age:Number,
stylemodel:String
}
3.高级格式:
props:{
age:{
//对age类型限制,如果传过来类型不一致则报错
type:Number,
//required:true required和default不能同时存在
default:10 //默认值限制
},
stylemodel:{
type:String,
required:true //必要值得限制
}
}
注意:
- props里面属性都是之前组件中传过去的,如果没有传但是props中写了则报错。
- props里面声明的属性不要再data中在声明,不然报错,优先级props中的高。
App传输list到子组件例子:
App.vue
<template>
<div id="app">
<div>
<!--加: 是因为想解析todos对象并不是字符串 :todos 右边的todos和下面data中的一样 :todos来源于listope.vue中的props:['todos']-->
<listope :todos="todos"></listope>
</div>
</div>
</template>
<script>
//es6中模块化的引入方式
import listope from './components/todos/listope.vue'
export default {
name: 'App',
data() {
return{
todos:[
{id:'01',title: '游戏',done:false},
{id:'02',title: '学习',done:true},
{id:'03',title: '工作',done:false},
{id:'04',title: '打悦悦屁屁',done:true}
]
}
},
components:{
listope
},
//与headerope.vue呼应
methods:{}
}
</script>
listope.vue
<template>
<ul>
<!--:todo 这里 :必须加因为要读的todoobj 是个对象, 不加 :直接把todoobj当成一个字符串-->
<itemope v-for="todoobj in todos"
:key="todoobj.id"
:todo="todoobj">
</itemope>
</ul>
</template>
<script>
import itemope from './itemope.vue'
export default {
name:'listope',
components:{},
//这里注意不要把props里面的东西改变后传到div中,也就是说不要改props中的东西!!!!
//如果todos改的是里面对象中的某个元素,这样即使改了也不会报错,但是如果todos下一层级(对象这一层改了)则直接会报错。最好props不要动
props:['todos']
}
</script>
特别注意:
- :todo 这里 :必须加因为要读的todoobj 是个对象, 不加 :直接把todoobj当成一个字符串。
- 这里注意不要把props里面的东西改变后传到div中,也就是说不要改props中的东西。如果todos改的是里面某一个对象中的某个元素,这样即使改了也不会报错,但是如果todos下一层级(某个对象这一层改了,比如多了个对象少了个对象)则直接会报错。最好props不要动
- 由于2所有最好props中的值不能作为v-model的值,因为props中数据不能改变,v-model双向绑定所以有getter setter 一旦setter改变数据则不适用于props了
图例:
二:props子组件给父组件传输
子组件给父组件传数据,父组件得给子组件一个方法,供子组件中方法调用。
一个根据id删除的案例(一:图片中的删除)
单条数据的itemope.vue
<template>
<li>
<label>
<span>{{todo.title}}</span>
</label>
<button @click="handleDeleteData(todo.id)">删除</button>
</li>
</template>
<script>
export default {
name:'itemope',
props:['todo','deleteData'],
methods:{
//删除
handleDeleteData(id){
if(confirm('确定删除吗?')){
this.deleteData(id);
}
}
}
}
</script>
<style>
li:hover{
background-color: #ddd;
}
</style>
所调用的方法(父组件App.vue提供的方法):
this.deleteData(id);
多条数据list的listope.vue
<template>
<ul>
<!--:todo 这里 :必须加因为要读的todoobj 是个对象, 不加 :直接把todoobj当成一个字符串-->
<itemope v-for="todoobj in todos"
:key="todoobj.id"
:todo="todoobj"
:deleteData="deleteData">
</itemope>
</ul>
</template>
<script>
import itemope from './itemope.vue'
export default {
name:'listope',
components:{itemope},
props:['todos','deleteData']
}
</script>
注意:
- 这里
props:['todos','deleteData']
拿到todos集合,直接v-for="todoobj in todos"
拿到todoobj 随后在通过:todo="todoobj"
往itemope.vue传todoo单个对象。deleteData也往itemope.vue传deleteData方法供其调用。
最终父组件App.vue,App里面写了删除的逻辑,但是最终在itemope.vue中调用
<template>
<div id="app">
<div>
<listope :todos="todos" :deleteData="deleteData"></listope>
</div>
</div>
</template>
<script>
//es6中模块化的引入方式
import listope from './components/todos/listope.vue'
export default {
name: 'App',
data() {
return{
todos:[
{id:'01',title: '游戏',done:false},
{id:'02',title: '学习',done:true},
{id:'03',title: '工作',done:false},
{id:'04',title: '打悦悦屁屁',done:true}
]
}
},
components:{
listope
},
//与headerope.vue呼应
methods:{
//删除一条数据
deleteData(id){
// this.todos = this.todos.filter((todo)=>{
// return todo.id != id;
// })
//上面方式比较复杂点,这种事简写
this.todos = this.todos.filter(todo=> todo.id != id);
}
}
}
</script>
list过滤数据的方式:
方式1:
this.todos = this.todos.filter((todo)=>{
return todo.id != id;
})
方式2:
//上面方式比较复杂点,这种事简写
this.todos = this.todos.filter(todo=> todo.id != id);
拓展:
子组件给父组件传数据还有其他方式比如 自定义事件结合emit,和ref结合emit
具体项目:gitee => demo
https://gitee.com/BruthLi/vuedemo.git