Vue之父子组件传值

最新推荐文章于 2022-12-16 14:29:17 发布
最新推荐文章于 2022-12-16 14:29:17 发布
阅读量234 收藏
点赞数
分类专栏： vue-js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33733970/article/details/80629367
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="inputValue">
    <button @click="handleBtnClick">提交</button>
    <ul>
        <todo-item v-bind:content="item"
                   :index="index"
                   v-for="(item,index) in list"
                   //父级组件方法☆
                   @delete="handleDeleteMove"
        >{{ item }}</todo-item>
    </ul>
</div>
<script>
    <!---->
    let TodoItem = {
        //子组件必须接受值★
        props: ['content','index'],
        //每一行内容点击
        template: '<li @click="handleItemClick">{{ content }}</li>',
        methods:{
            handleItemClick:function () {
                //使用索引时this.index
                this.$emit('delete',this.index)
            },

        }
    };

    let app = new Vue({
        el: '#app',
        components: {
            TodoItem: TodoItem
        },
        data: {
            list: [],
            inputValue: ''
        },
        methods: {
            handleBtnClick() {
                this.list.push(this.inputValue);
                this.inputValue = ''
            },
            handleDeleteMove:function (index) {
                this.list.splice(index,1)
            }
        }
    })
</script>

</body>
</html>

父组件给子组件传值，子组件需要用v-bind定义，然后在子组件的props中接收：

<todo-item v-bind:content="item"
                   :index="index"
                   v-for="(item,index) in list"
                   //父级组件方法☆
                   @delete="handleDeleteMove"
        >{{ item }}</todo-item>
 let TodoItem = {
        //子组件必须接受值★
        props: ['content','index'],

子组件给父组件传值，子组件需要用this.$emit，触发父组件的方法：

this.$emit('delete',this.index)
@delete="handleDeleteMove"
handleDeleteMove:function (index) {
                this.list.splice(index,1)
            }
Quincy379
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue父子组件传值（porvide+inject实现组件通信）
weixin_45745641的博客
10-26 320
如果我们需要把父组件的值传递给子组件，而且子组件可能存在层层嵌套，那么就可以使用provide+inject的方法来实现组件之间的通信 这里是父组件，将getReportData 里的值传到子组件 这里是子组件，先用inject进行接收，然后通过computed传入这边的data， 最后再上面div中进行渲染，这样值就传过来了 小技巧： 如果我们需要传入的组件和值非常多，使用上面的方法时，就需要在每个组件都写这些代码，就会显得非常冗余，那么我们可以新建一个文件，将对数据输出和处理的方法进行封装，然后在页
vue:父子组件传递值的方法
qq_45104740的博客
03-31 1014
封装好的组件常常作为子组件放在父组件中，为了该组件的通用性，不可避免地会有父组件把值传入子组件中，子组件返回值给父组件，下面介绍如何传递。 父组件把值传入子组件 父组件使用子组件bar的代码：rightType是要传递的值，注意要有“：” <bar :rightType="1" ></bar> bar子组件的script部分代码:这里是script部分，将right type放在props里 export default { data() {}, p
vue父子组件之间的传值方式
GSON的博客
11-27 516
一、父组件给子组件传值 1.子组件写法 2.父子件写法 注意：如果想传递动态值: 父组件向子组件传值成功 总结一下： 子组件在props中创建一个属性，用以接收父组件传过来的值 父组件中注册子组件 在子组件标签中添加子组件props中创建的属性 把需要传给子组件的值赋给该属性 -----------------------------------------------------------------------------------------------...
vue父子组件传值的方法汇总
weixin_41791737的博客
06-24 239
父子组件传值方法分为三种（父子、多层父子、非关系组件） 一、父子组件通讯：纯粹的父子组件传值方法有如下方法 1、props和emit（父子组件通讯）2、ref和emit（父子组件通讯） 2、ref和emit（父子组件通讯）2、ref和refs（父子组件通讯） 3、parents和parents和parents和children（父子组件通讯） 二、多层父子：父子孙子等多层组件 4、attrs和attrs和attrs和listeners(多层父子组件传值) 5、provide和inject(多层父子组件传值)
Vue父子组件间传值方法集
老古懂的博客
02-24 4248
props和$emit+事件 父传子 //父组件： <vue-child :title="父组件变量"></vue-child> // 子组件中： export default { props: { title: { type: String, default: 'hello world' } } } 子传父 //子组件： <div class="testCom"> <input type="text" v
详解Vue之父子组件传值
10-17
主要介绍了Vue之父子组件传值，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue3父子组件传值.doc
02-05
vue3父子组件传值
vue.js 传值方法（父子组件传值、非父子组件传值）
01-08
组件传值 A.父组件传值给子组件： 基本原理为：props方法 基本写法：例如-父组件对应 Home.vue ；子组件对应 HomeChild.vue 父组件： 1.首先父组件引入子组件，并且注册子组件: improt HomeChild from './...
Vue非父子组件之间传值
01-08
非父子组件间的传值(bus/总线/发布订阅模式/观察者模式) // 在每一个组件上添加BUS属性 Vue.prototype.bus = new Vue() Vue.component('child',{ props:{ content:String }, data(){ //子组件不能直接修改...
Vue父子组件传值
gclhaha的博客
08-16 140
先上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> //父组件内容 <div id="app"> <com...
vue父子组件传值
zt_9773的博客
11-02 450
一、vue子组件向父组件传值 1、定义子组件： 2、定义父组件： 二、父组件向子组件传值 1、定义父组件： 2、定义子组件： 3、通过ref，v-slot传：适用于，界面中点击按钮弹框填写一些信息，如新增用户或者填写一个小的表格。 <addUserRouter ref="addUser"><template v-slot: addUser></template></addUserRouter> addUserRouter为一...
vue之父传子props
铁甲小宝爱编程
11-24 174
父传子 props 1. 创建子组建 （创建，挂载，使用） 2. 在子组建中创建props属性（用于接收父组件出入的数据） 3. 在使用子组建的标签内用v-band绑定属性和数据（：props属性＝“父组件数据”） 4. 在子组建中使用父组件内的数据。 ...
VUE 之 父子组件通信简述
qq_20057267的博客
08-09 191
最好是先看下面的小步骤，再看大图的解释 ：） 知识背景 01. 父组件向子组件传递数据 —— props          需求： 父组件中有一个数组数据和一个字符串对象数据，现在要传递给子组件 父组件Vue： data中放数据，components中注册子组件cpnC1（局部注册） 子组件cpnC1： template中放HTML模板（这里是模板抽离了），props中用数组来保存从父组件来的数据 模板template： 写要展示.
Vue中父子组件传值的多种方式
热门推荐
qq_41965819的博客
04-08 3万+
vue中父子组件传值 vue中的父子组件传值，值得注意的是要遵守单向数据流原则。所谓单向数据流原则，简单的说就是父组件的数据可以传递给子组件，子组件也可以正常获取并使用由父组件传过来的数据；但是，子组件中不能直接修改父组件传过来的数据，必须要向父组件传递一个事件来父组件需要修改数据，即通过子组件的操作，在父组件中修改数据；这就是单项数据流。 废话不多说，先看演示： 这里可以看到我在父组件中定义了一个msg属性，子组件也获取到msg的值显示到input中，并通过修改子组件中input中的value值，实
Vue中父子组件如何传值
daishu_shu的博客
04-11 2万+
关键词：props、$emit()、绑定的数据和事件 文章目录前言一、将子组件引入父组件二、父组件如何传值给子组件三、子组件如何接收父组件传过来的值并使用(props)四、子组件如何传值给父组件($emit)五、父组件使用子组件传过来的值总结 前言 `提示：这里可以添加本文要记录的大概内容 项目中往往会把一些常用的公共代码抽离出来，写成一个子组件。或者在一个页面中的代码太多，可以根据功能的不同抽离出相关代码写成子组件，这样代码结构会更加简洁明了，后续维护更加方便。本位将以一个项目中用到的例子进行描述哈.
vue父子组件传值的方法总结
qq_45337939的博客
08-17 1万+
一，父向子传值 1.通过props 使用技巧： 子组件内, props定义变量, 在子组件使用变量 父组件内, 使用子组件, 属性方式给props变量传值 注意事项： 父组件的数据发生了改变，子组件会自动跟着变 子组件不能直接修改父组件传递过来的props，会报错， props是只读的 子组件修改，不通知父级，会造成数据不一致 PS：父组件传给子组件的是一个对象，子组件修改对象的属性，是不会报错的，对象是引用类型, 互相更新 总结: ..
Android MVVM详解
Mubly的博客
12-16 9289
一、MVVM是什么？ (1).Model:数据层，包含数据实体和对数据实体的操作 (2).View:界面层，对应于Activity，XML,View，负责数据显示以及用户交互。 (3).ViewModel：关联层，将Model和View进行绑定，Model或者View更改时，实时刷新对方。
Vue之父组件向子组件传递数据
tian361zyc的博客
06-03 1万+
Vue
vue3父子组件传值
最新发布
05-31
在Vue3中，可以使用Props和emit来实现父子组件之间的数据传递。 1. Props 父组件通过props向子组件传递数据，子组件通过props接收数据。...以上就是Vue3父子组件传值的两种方式，可以根据具体场景选择使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值