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

Vue父子组件通信解析

最新推荐文章于 2024-05-14 16:18:41 发布

qq_37591637

最新推荐文章于 2024-05-14 16:18:41 发布

阅读量8.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue前端专栏

本文链接：https://blog.youkuaiyun.com/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}}<