我的书签
添加书签
移除书签笔记
逐层传递数据
如果 App.vue 想给 孙子MyItem.vue传递组件，需要通过 MyList 传递，即 逐层传递。
见下图:
Vue监测数据是否被修改的探讨
关于 props
原则上，我们不要修改 props 中的数据，我们只能从 props 读取数据。
重要源码
App.vue
<template>
<div id="root">
<div class="todo-container">
<div class="todo-wrap">
<!-- 父组件App.vue 给 子组件MyHeader 传递了一个函数 addTodo() -->
<!-- 把下面的方法 addTodo() 给子组件 MyHeader
<MyHeader> 自定义组件标签名
:（v-bind 简写） 动态绑定指令
addTodo 传递给 子组件MyHeader 的属性名（子组件通过 props接收）
"addTodo" 父组件App.vue 中 methods 里的方法名
-->
<MyHeader :addTodo="addTodo"/>
<!-- 父组件App.vue 给 子组件MyList 传递了一个属性 todos -->
<!-- 将父组件的 todos 数据传递给子组件
<MyList> 自定义组件标签名
:（v-bind 简写） 动态绑定指令
todos 传递给子组件的属性名（子组件通过 props接收）
"todos" 父组件 data 中的属性名（数据来源）
-->
<!-- App.vue 如果想给 孙子组件 MyItem.vue 传递数据(是否勾选)，必须先给 MyList子组件 -->
<MyList :todos="todos" :checkTodo="checkTodo"/>
<MyFooter/>
</div>
</div>
</div>
</template>
<script>
import MyHeader from './components/MyHeader.vue'
import MyFooter from './components/MyFooter.vue'
import MyList from './components/MyList.vue'
export default {
name:'App',
components:{
MyHeader,
MyList,
MyFooter
},
//从MyList.vue里，将 data() 移到这里。
data(){
return {
todos :[
{id:'0001',title:'抽烟', done:true},
{id:'0002',title:'喝酒', done:false},
{id:'0003',title:'开车', done:true}
]
}
},
//如果想实现 子组件 MyHeader.vue 传递数据 给 父组件App.vue，那么就在 此处父组件位置，准备好一个方法。
methods: {
//添加一个todo
addTodo(todoObj){
console.log('我是 App组件, 我收到了数据:', todoObj)
//父组件App.vue 在接收到 子组件MyHeader.vue 传递过来的参数x 之后，再传递给 子组件MyList.vue
this.todos.unshift(todoObj)
},
//勾选 or 取消勾选 一个todo
checkTodo(id){
//将 todos数组 进行遍历:
this.todos.forEach((todo) => { //拿到其中的 todo项
//如果当前项的todo.id 和 传过来的 id 相同,那么就把当前项的done取反。
if(todo.id== id) {
todo.done=!todo.done
}
})
}
}
}
</script>
<style>
/*base*/
body {
background: #fff;
}
.btn {
display: inline-block;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
text-align: center;
vertical-align: middle;
cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
border-radius: 4px;
}
.btn-danger {
color: #fff;
background-color: #da4f49;
border: 1px solid #bd362f;
}
.btn-danger:hover {
color: #fff;
background-color: #bd362f;
}
.btn:focus {
outline: none;
}
.todo-container {
width: 600px;
margin: 0 auto;
}
.todo-container .todo-wrap {
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
/*header*/
.todo-header input {
width: 560px;
height: 28px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
padding: 4px 7px;
}
.todo-header input:focus {
outline: none;
border-color: rgba(82, 168, 236, 0.8);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
/*main*/
.todo-main {
margin-left: 0px;
border: 1px solid #ddd;
border-radius: 2px;
padding: 0px;
}
.todo-empty {
height: 40px;
line-height: 40px;
border: 1px solid #ddd;
border-radius: 2px;
padding-left: 5px;
margin-top: 10px;
}
/*item*/
li {
list-style: none;
height: 36px;
line-height: 36px;
padding: 0 5px;
border-bottom: 1px solid #ddd;
}
li label {
float: left;
cursor: pointer;
}
li label li input {
vertical-align: middle;
margin-right: 6px;
position: relative;
top: -1px;
}
li button {
float: right;
display: none;
margin-top: 3px;
}
li:before {
content: initial;
}
li:last-child {
border-bottom: none;
}
/*footer*/
.todo-footer {
height: 40px;
line-height: 40px;
padding-left: 6px;
margin-top: 5px;
}
.todo-footer label {
display: inline-block;
margin-right: 20px;
cursor: pointer;
}
.todo-footer label input {
position: relative;
top: -1px;
vertical-align: middle;
margin-right: 5px;
}
.todo-footer button {
float: right;
margin-top: 5px;
}
</style>MyList.vue
<template>
<ul class="todo-main">
<!-- 给 MyItem组件传数据 其中key可以随便定，但是value不能，此处的value只能 todoObj项
todoObj 是做事的时候，每一个要做事的对象。
:todo 给 key=todo 自定义属性 绑定 一个值为 todoObj
<MyItem v-for="todoObj in todos" :key="todoObj.id" :todo="todoObj"/>
-->
<MyItem
v-for="todoObj in todos"
:key="todoObj.id"
:todo="todoObj"
:checkTodo="checkTodo"
/>
</ul>
</template>
<script>
import MyItem from './MyItem'
export default {
name:'MyList',
components:{MyItem},
/* 把该数据放到父亲App里:
data(){
return {
todos :[
{id:'0001',title:'抽烟', done:true},
{id:'0002',title:'喝酒', done:false},
{id:'0003',title:'开车', done:true}
]
}
}
*/
//父组件 App.vue既然传递过来的 todos, 那么此处需要接收一下:
//props:['todos'] //这样一写，那么这东西就会出现在 vc 中。 注意： todos 在 App.vue 中是在 data 中，而本文件的 todos 在 props 里。
//checkTodo 在被动的接收 父组件 发来的数据checkTodo
props:['todos', 'checkTodo']
}
</script>
<style scoped>
/*main*/
.todo-main {
margin-left: 0px;
border: 1px solid #ddd;
border-radius: 2px;
padding: 0px;
}
.todo-empty {
height: 40px;
line-height: 40px;
border: 1px solid #ddd;
border-radius: 2px;
padding-left: 5px;
margin-top: 10px;
}
</style>MyItem.vue
<template>
<li>
<label>
<!-- 默认勾选
<input type="checkbox" checked/>
-->
<!-- :checked="true" 表示 我们想给 input 添加一个 checked 选项，如果为true就勾选，否则不勾选。
:checked="todo.done" 初始化谁勾，谁不勾。
<input type="checkbox" :checked="todo.done" @click="handleCheck(todo.id)"/>
-->
<!-- 另外一种方法： 绑定 change事件-->
<input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/>
<!-- 如下代码也能实现功能,但是不推荐这种，Vue原则是：props 只能接收数据，不允许修改数据。因为如果修改了props，Vue没有监测到。
<input type="checkbox" v-model="todo.done"/>
-->
<!--span>xxxxx</span-->
<!-- 通过插值语法 展示 接收到的 todo对象-->
<span>{{ todo.title}}</span>
</label>
<button class="btn btn-danger" style="display:none">删除</button>
</li>
</template>
<script>
export default {
name:'MyItem',
//声明接收 todo 对象
//继续接收 MyList父组件 发来的数据checkTodo
props:['todo', "checkTodo"],
mounted(){
console.log(this.todo)
},
methods: {
handleCheck(id) {
console.log(id)
//通知 App.vue组件 将对应的 todo对象的 done值 取反
//数据todo对象在哪里? 答: 在 App.vue。 我们有一句总结：数据在哪里，操作数据的方法就在哪里！
this.checkTodo(id) //把id传递给 父组件MyList,再间接给 爷组件App.vue
}
}
}
</script>
<style scoped>
/*item*/
li {
list-style: none;
height: 36px;
line-height: 36px;
padding: 0 5px;
border-bottom: 1px solid #ddd;
}
li label {
float: left;
cursor: pointer;
}
li label li input {
vertical-align: middle;
margin-right: 6px;
position: relative;
top: -1px;
}
li button {
float: right;
display: none;
margin-top: 3px;
}
li:before {
content: initial;
}
li:last-child {
border-bottom: none;
}
li:hover{
background-color: #ddd;
}
li:hover button{
display: block;
}
</style>