Vue中组件间的传值（子传父，父传子）
Posted 时光-ing
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue中组件间的传值（子传父，父传子）相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TodoList</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
</head>
<body>
<!-- 组件化改造内容：list标签组件化 -->
<div id="app">
<input type="text" v-model="inputValue">
<button v-on:click="handleBtnClick">提交</button>
<ul>
<!-- todo-item就是组件名TodoItem，这里不区分大小写 -->
<!-- v-bind绑定值 3@delete事件绑定，item是数组的内容，index是数组的下标-->
<todo-item v-bind:content="item"
v-bind:index="index"
v-for="(item,index) in list" @delete="handleItemDelete">
</todo-item>
</ul>
</div>
<script>
// 父传子-在父组件使用子组件的地方通过v-bind进行传值，在子组件中通过props进行接受传过来的值。
// 子传父-在子组件中通过$emit向外抛出一个事件，通过在父组件使用子组件的地方监听该事件，就要拿到子组件传过来的值。
// 在写Vue代码的时候不要直接操作DOM，而是要通过数据的改变，让页面去自动更正变化。
// 创建全局组件的一个方法Vue.component
Vue.component('TodoItem',
props: ['content','index'], // 接收外部传入的v-bind:content的值，父组件todo-item向子组件TodoItem传值
template:"<li @click='handleItemClick'>content</li>", // 1创建一个模板。v-on:click简写@click,v-bind:可以简写为:
methods:
handleItemClick:function()
this.$emit('delete',this.index) // 2当点击子组件的时候，子组件会向外出发一个delete事件，在父组件中创建子组件的同时，可以去监听delete事件
);
var app = new Vue(
el:'#app',
data:
list:[],
inputValue:''
,
methods:
handleBtnClick:function()
this.list.push(this.inputValue);
this.inputValue = '';
,
handleItemDelete:function(index) // 4定义删除方法，使用index作为参数
// this.list = [] // 清空所有数据
this.list.splice(index,1) // 传入的数据下标减一
)
</script>
</body>
</html>
以上是关于Vue中组件间的传值（子传父，父传子）的主要内容，如果未能解决你的问题，请参考以下文章