本帖最后由 逆风TO 于 2019-7-19 09:04 编辑
这个Demo中通过 v-bind绑定，实现了父子组件间的数据传递
子组件往父组件传值
1、现在子组件中进行监听注册 @click='handleItemClick'
2、在子组件中的methods中注册 handleItemClick
3、this.$emit("delete"); 子组件 被点击时，向外触发一个 delete事件，
4、同时需要在父组件中进行对该事件进行监听 @delete="handleItemClick"
5、在父组件的methods 中注册 handleItemClick方法
父组件往子组件传值
1、通过v-bind绑定数据，
2、在组件 props:[] 中注册，就可以访问数据了
Vue.component("todo-item",{
props:['todo'],
template:"<li>{{todo}}</li>"
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单的组件间传值,父子组件之间的数据传递</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<!--
M V P
M V VM
-->
<!-- v-model 实现 数据双向绑定，在 data中注册一下，两边数据会保持一致，谁变都变 -->
<input type="text" v-model='inputValue'>
<!-- 使用 v-on:click 来实现 事件绑定 handleBtnClick ，然后从 方法中找个这个方法，监听执行 -->
<input type="button" name="" v-on:click="handleBtnClick" value="提交">
<ul>
<!-- <li v-for="item in list">{{item}}</li> -->
<!-- v-for 遍历 list 每个元素 -->
<!--
1、这里有个 及其重要的注意点 定义组件名字为 TodoItem 使用时要写成 todo-item，
即把大写变小写，每个之间加一个 - ！！！！！！！
2、或者直接定义为 todo-item
-->
<!--
v-bind 实现数据绑定，
把list中的数据给 item，
item 和 content绑定在一起,
这里要在 Vue.component 中添加 props:['content']
这里的 v-bind: 后的名字 要和 props[] 中一致！！！！
-->
<todo-item v-bind:todo="item"
v-bind:index="index"
v-for="(item,index) in list"
@delete="handleItemClick">
</todo-item>
</ul>
</div>
<script type="text/javascript">
// Vue 创建局部组件
/*
局部组件在定义后不能像全局组件一个样直接使用，需要在要使用的Vue对象中进行注册
components:{
TodoItem:TodoItem
}
在组件中进行事件绑定了普通的事件绑定一样，
用v-on:click 进行标记，然后在methods 中注册
*/
var TodoItem = {
props:['todo','index'],
// v-on:click 可以简写为 @click
// v-bind: 可以简写 :
template:"<li @click='handleItemClick'>{{todo}}</li>",
/*
子组件往父组件传值
1、现在子组件中进行监听注册 @click='handleItemClick'
2、在子组件中的methods中注册 handleItemClick
3、this.$emit("delete"); 子组件 被点击时，向外触发一个 delete事件，
4、同时需要在父组件中进行对该事件进行监听 @delete="handleItemClick"
5、在父组件的methods 中注册 handleItemClick方法
*/
methods:{
handleItemClick:function () {
this.$emit("delete",this.index);
}
}
}
/*
// Vue 提供的创建 全局组件
Vue.component("todo-item",{
props:['todo'],
template:"<li>{{todo}}</li>"
});
*/
var app = new Vue({
el:'#app',
components:{
TodoItem:TodoItem
},
data:{
// list:['Hello','World'],
list:['Hello','World!'],
inputValue:'v-model'
},
methods: {
handleBtnClick:function () {
this.list.push(this.inputValue);
},
handleItemClick:function (index) {
this.list.splice(index, 1);
}
}
});
</script>
</body>
</html>
|
|
收藏
淘帖
踩
