vue项目通过点击按钮动态增加组件，并且给组件里面的参数传值

最新推荐文章于 2024-05-24 15:48:22 发布
最新推荐文章于 2024-05-24 15:48:22 发布
阅读量8.5k 收藏 10
点赞数
分类专栏： vue前端专栏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37591637/article/details/90200085
版权

第一种、父子组件都在一个文件里面

效果如下

代码如下 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
	<div id="app">
  <div v-for="(d,index) in counter" :key="index">
	<dom :mess="d.d" :info="d.t"></dom>
</div>
		<button @click="add">添加</button>
	</div>
<script type = "text/javascript">
Vue.component('dom', {
  template: '<div>{{mess}}{{info}}</div>',
	props:['mess','info']
})
	new Vue({
  el: '#app',
  data: {
 counter:[]
  },
methods:{
add(){
this.counter.push({d:'小腿',t:'2019'})
}
}
})
</script>
</body>
</html>

解释代码

1、props里面的参数名称要和template里面的参数名称一致

2、:mess和:info和props里面的参数名称一致

3、.d和.t主要是跟push(d:,t:)一致

 

第二种、父子组件是分离的

思路：在子组件里面有一个props:[]这个里面专门放参数，也是参数入口的一个方法吧

子组件

父组件

qq_37591637
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue 父组件给子组件传值子组件给父组件传值的实例代码
10-17
本篇将详细讲解Vue中的父子组件传值机制，包括父组件如何向子组件传递数据以及子组件如何向父组件反馈信息。 1. **父组件给子组件传值** 在Vue中，父组件向子组件传递数据主要是通过`props`属性实现的。首先，在...
vue 进阶之实现父子组件间的传值
10-17
例如，我们可以在子组件中增加一个按钮，点击时触发一个事件，将更新后的值传递给父组件： ```javascript methods: { handleClick() { this.number++; this.$emit('change', 1); } }, template: `...
Vue通信、传值的多种方式
doudouY075的博客
07-21 124
  一、通过路由带参数进行传值 ①两个组件 A和B,A组件通过query把orderId传递给B组件（触发事件可以是点击事件、钩子函数等） this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B ②在B组件中获取A组件传递过来的参数 this.$route.query.orderId   二、通过设置 Session Storage缓存的形式进行传递 ①两个组件A...
VUE子组件向父组件传值详解（含传多值及添加额外参数场景）
10-14
主要给大家介绍了关于VUE子组件向父组件传值（含传多值及添加额外参数场景）的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue组件传值的六种方法
最新发布
li826827的博客
05-24 741
父子组件通信: props；ref；兄弟组件通信: eventBus；vuex跨级通信: eventBus；Vuex；
Vue通过脚本动态加载自定义组件
08-23 1098
很多时候需要脚本的方式动态加载自定义组件，代码列子如下 const my-comoponent = () => import('../components/my-comoponent.vue') var toolborVM = new Vue({ template: '<my-comoponent:toolData="toolData"></my-comoponent>', components: {
vue 动态、批量引入组件
qq_52337177的博客
05-14 1432
一次性处理多个组件的引入，减少了多次请求的开销，节省多次手动引入注册
vue 自定义指令封装点击事件并插入DOM元素节点,并传参
周家大小姐
07-26 1484
需求:点击小图出现查看大图 这是在element上进行修改 html中使用v-click-preview-img指令 <el-image v-click-preview-img="{ licensePlate: item.licensePlate ,times: item.times,srcList: item.srcList }" class="imag" v-if="item.imgUrl" :src="item.imgUrl" :preview-src-list="item.srcList
vue 子组件向父组件传值方法
08-27
通过这种方式，当用户在子组件`component-a`中点击按钮时，`onClickMe`方法会被调用，触发`child-say`事件并传递`somedata`。父组件则会接收到这个事件，并通过`listenToMyBoy`方法更新`childWords`的值，从而在页面...
Vue 最常用不同组件传值
12-13
- **A文件**：在这个组件中，通过按钮点击事件触发了一个名为`userInfo`的方法，并将需要传递的`id`作为参数传入。这里使用了`@click`绑定点击事件处理器，并通过`this.$router.push`方法进行路由跳转，同时将数据...
VUE 实现动态给对象增加属性，并触发视图更新操作示例
10-15
主要介绍了VUE 实现动态给对象增加属性，并触发视图更新操作,涉及vue.js对象属性动态操作及视图更新相关实现技巧,需要的朋友可以参考下
VUE兄弟组件传值操作实例分析
10-16
在子组件A的代码中，我们定义了一个按钮点击事件`abtn`，在这个事件处理函数中，使用`eventVue.$emit`发射了一个名为`myFun`的事件，并将自身数据`this.msg`作为参数传递。 ```javascript // 子组件A import ...
uniapp（vue）在v-for中组件的事件中添加自己的参数
lsjweiyi的博客
04-16 1988
在html中给我们经常会因为数据是列表而需要用循环来展示数据。而其中有些组件是有回调事件的。这时候循环中如何知道是哪个数据在触发事件就是很重要的事，否则无法修改对应的数据。 举个例子，我们在购物车中需要用到uni-number-box去修改数量，购物车的商品肯定是用循环生成的。每个商品对应着一个uni-number-box。但是uni-number-box的change事件仅仅只返回当前数量的值。在代码中我们并不知道去给具体哪个商品修改数据： 而我们在html的循环中，可以有列表的下标，甚至是直接拿数据对
vue 带下标循环、点击事件动态id赋值和事件传参
Hello, New World!
07-25 4300
vue 带下标循环、点击事件动态id赋值和事件传参 Vue 使用的 CDN，可以直接复制，预览测试 v-for 和 click 事件传参效果。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue 带下标循环、点击事件动态id赋值和事件传参</title> <script src="https://cdn.jsdelivr.net/npm/
vue中dom元素和组件的获取
weixin_30663391的博客
05-10 687
Vue中获取DOM元素 <div id="app"> <input type="button" value="获取元素" @click="getElement"> <h3 ref="myh3">今天天气真好啊</h3> </div> <script> ...
vue 点击按钮增加一行
热门推荐
xidongdong1的博客
05-11 2万+
data() { return { customized_descs: [1]， } },不要js,jq里面的方法了。。。
使用Vue.entends()编写vue插件，然后插入dom元素中
qq_42931285的博客
02-14 978
使用Vue.entends()编写vue插件，然后插入dom元素中
vue操作dom元素
qq_38677540的博客
08-27 566
原生js操作dom 原生js获取dom就很简单了，例如：根据id、class、当前元素的上一个元素 使用DOM API直接找元素 <div class="box"></div> <script> mounted () { let elm = this.$el.querySelector('.box) } </script> 这种方法足够简单直观，Vue组件在patch阶段结束时会把this.$el赋值为挂载的根dom元素，我们可以直接使
vue 怎么点击按钮 实现父组件给子组件传值
06-01
在 Vue 中，父组件向子组件传递数据有多种方式，其中一种常用的方式是通过 props 属性传递数据。 要实现父组件向子组件传值，你需要按照以下步骤进行操作： 1. 在父组件中，使用子组件标签时，通过属性绑定的方式传递数据，例如： ``` <template> <div> <child-component :message="parentMessage"></child-component> <button @click="changeMessage">改变消息</button> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }, data() { return { parentMessage: '父组件的消息' } }, methods: { changeMessage() { this.parentMessage = '改变后的消息' } } } </script> ``` 2. 在子组件中，通过 props 属性声明接收父组件传递过来的数据，例如： ``` <template> <div> <p>{{ message }}</p> </div> </template> <script> export default { props: { message: String } } </script> ``` 这样，当你在父组件中点击按钮改变消息时，子组件中的消息也会随之更新。需要注意的是，父组件传递给子组件的数据应该是单向数据流，子组件不应该直接修改父组件传递过来的数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qq_37591637

请给我持续更新的动力~~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值