Web前端教程
大家好，随着人们对生活的质量要求越来越高，电脑已经成为人们生活和工作中的必需品，电脑是有很多软件系统程序组成，如果想要学好电脑，我们必须对这些软件系统程序有所了解，今天小编就带领大家学习Vue 组件间传值，组件间传值，父子组
Web前端教程图1欧洲五大联赛即将开始了
这个Demo中通过v-bind绑定，实现了父子组件间的数据传递
子组件往父组件传值
1、现在子组件中进行监听注册@click='handleItemClick'
2、在子组件中的methods中注册 handleItemClick
3、this.$emit("delete"); 子组件被点击时，向外触发一个delete事件，
4、同时需要在父组件中进行对该事件进行监听@delete="handleItemClick"
5、在父组件的methods中注册handleItemClick方法
1
2
3
4
5
父组件往子组件传值
Web前端教程图2欧洲五大联赛即将开始了
1、通过v-bind绑定数据，
2、在组件 props:[]中注册，就可以访问数据了
Vue.component("todo-item"，{
props:['todo']，
template:"<li>{{todo}}</li>"
});
1
2
3
4
5
6
<！DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
Web前端教程图3欧洲五大联赛即将开始了
<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>
