Vue props实现组件间数据传输

一：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

Vue props实现组件间数据传输相关推荐

Vue实现兄弟组件间的方法调用及回调
Vue实现兄弟组件间的方法调用及回调看兄弟间数据传递的看我写的这篇文章:vue实现兄弟组件间的实时通信先说说我遇到的情况: 点击左侧树tree,需要调用右侧houseInfo组件中的新增方法,弹出 ...
VUE：兄弟组件间传参
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1.定义一个中间 eventBus.js ,只有 2 行代码,用于传参: // 此页面是vue ...
VUE：父子组件间传参、子组件传值给父组件、父组件传值给子组件
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子 ...
5.VUE简单的组件间传值【父组件向子组件传值；子组件向父组件传值】
父组件向子组件传值父组件使用子组件时通过v-bind:变量的形式将对应的值传给todo-item子组件子组件通过props接收从父组件传来的content参数子组件向父组件传值数据在父组件中 ...
vue子父组件间传值
父组件传值给子组件 props方式父组件上1处声明传递的键并赋值,子组件2处使用props接收一下这个键就可以使用了.在父组件改变这个值的话子组件跟着一起响应,子组件改变这个值的话父组件不改变.次为 ...
vue Bus 总线组件间通信
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 有时候两个组件也需要通信(非父子关系).当然Vue2.0提供了Vuex,但在简单的场景下,可以使用一 ...
vue 跳添加编辑页面传两个值_vue两个组件间值的传递或修改方式
1.可以用公共的父组件来实现: 2.可以在store.js里面在设置公共变量: 3.也可以用本地存储localStorage.setItem()和localStorage.getItem(),通过修改 ...
vue组件间通信传递数据的四种方式（路由传参、父子组件传参、兄弟组件传参、深层次传参）
前言: vue组件间通信对于经常来写vue的伙伴来说应该是很轻松的,对于一些刚入门的伙伴来说可能就有些迷茫,感觉方式有很多种,但是总结起来又不知道应该怎么说,在下面的文章中,我结合自己的开发过程中经常 ...
深入浅出，带你看懂Vue组件间通信的8种方案
前言 Vue种组件通信的情况有多种,总结有以下4种情况: 父子组件间通信兄弟组件间通信祖孙后代间通信无关系组件间通信 8种解决方案通过 props 传递通过 $emit 触发自定义事件使用 ...

Vue props实现组件间数据传输

Vue props实现组件间数据传输相关推荐

最新文章

热门文章