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

ゝ一纸荒年。 2022-02-01 09:59 227阅读 0赞

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

### ***效果如下*** ###

![20190514093534945.gif][]

### ***代码如下***  ###

<!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:)一致***

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70][]

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

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

***子组件***

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1][]

父组件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 2][]

[20190514093534945.gif]: /images/20220201/8b0fdb3affab4dbdaf02d0de6b9b379c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70]: /images/20220201/025760ca3ae6478bbc13161cb4c1137f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1]: /images/20220201/cada0238f8024d44aae571eb143d720d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 2]: /images/20220201/07a87d60cefc4ad296d99762517f55a1.png