Vue父子组件传值----$emit子传父

Vue父子组件传值是个比较经典的问题，在这里，咱们先谈一下，子组件给父组件传值。

这是一个子组件

<!-- 子组件1 -->
<template><div  class="list"><ul><li v-for="item in list" :key="item.id">{{ item.title }}</li></ul></div>
</template><script>export default {props:{list:Array},name: "items",}
</script>
<style scoped>
</style>

这是列表子组件，它通过 this.$emit的方式给父组件传递了自己所绑定的title值。这样就向外触发了一个addGet事件。

<!-- 子组件2 -->
<template><div class="input"><Input type="text" v-model="title" style="width: 100px"></Input><Button @click="add">添加</Button></div>
</template><script>export default {name: "input",data(){return{title:''}},methods:{add(){this.$emit('addGet',this.title);}}}
</script>
<style scoped>
</style>

这是一个父组件
父组件在这里定义了一个自定义事件addGet，事件名是addInfo，用来接受子组件传过来的title值。

<!-- 父组件 -->
<template><div id="app"><input @addGet="addInfo"></input><items :list="list"></items></div>
</template>
<script>import Items  from "./items ";import Input from "./input ";export default {name: "test",components: { Items , Input },data() {return {list:[{id:1,title:'标题1'},{id:2,title:'标题2'}]}},methods: {addInfo(title){this.list.push({id:Math.random(),title})}}}
</script>
<style scoped>
</style>

这个时候你会看见父子组件是这样的：

此时你输入标题3，点击添加，就会在标题2的下边新增一个标题3啦
这是父子组件最后得到的效果图

今天就到这里了
以后还会继续更新。

Vue父子组件传值----$emit子传父相关推荐

vue中父子组件先后渲染_vue父子组件传值（子传父，非父子组件传值）
1. 子组件向父组件传值子组件: <template><div>子组件:<span>{{childValue}}</span><!-- 定义一个 ...
vue父子组件传值：详解父组件向子组件传值（props）
vue父子组件传值:父组件向子组件传值用的是props 1.定义父组件 1)父组件想要向子组件传值时,那么需要在子组件引入的地方绑定一个属性,属性值就是要传的数据,并且要在父组件中引入子组件. 2)这 ...
组件传值（子传父父传子）
Vue的组件传值父传子首先在父组件引入子组件,,然后在父组件中v-bind{函数名,要传的数值} 在子组件中需要一个接收器,props:{ 父组件的函数名} import menuNav from ...
Vue 父子组件传值之子组件向父组件传值
所谓的子组件向父组件传值,实际上用的是事件映射,事件映射其实相当于自定义了一个事件第一个参数是自定义(映射)事件的名称第二个参数是要携带的参数在子组件中,首先需要使用$emit方法,该方 ...
vue 父子组件传值
父子组件传值最常用的方法(4种) 1 . 父组件传递数据给子组件(props)vue官方文档特别注意!!特别注意!!特别注意!! props传值的类型如果是Object类型,如对象,数组等,传 ...
快速理解Vue父子组件传值
组件化开发是目前前端开发必备的开发技能,组件化开发可以大大提高开发效率今天整理一下Vue的父子组件传值方式,方便还没有理解的朋友学习. 1.父组件向子组件传值  ...
Vue父子组件传值问题
今天在编写vue子组件时遇到的两个问题来分享以下父子组件传值问题父组件 <md-editor ref="mdEditor" :text="form.conten ...
Vue3 - 组件通信（子传父）
前言相比 Vue2,仅仅是使用方法上发生变化,其他没变. 首先来回忆一下,在 Vue2 中,子组件的值是如何传递给父组件的? 使用一个叫 $emit() 的方法,第一个参数是事件名,第二个参数是具体 ...
vue3的组件传递之子传父（项目实操）
先了解一下跳转,点击新建弹出商品选择弹窗点击商品选择弹窗的保存弹出另一个弹窗 confirmProductEdit.vue 是确定商品信息的组件 3 index.vue 父组件 1 produ ...

Vue父子组件传值----$emit子传父

Vue父子组件传值----$emit子传父相关推荐

最新文章

热门文章