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

第一种、父子组件都在一个文件里面效果如下代码如下<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试实例 - 菜鸟教程(runoob.com)</title><script src="https://cdn.static...

qq_37591637

8619人浏览 · 2019-05-14 09:40:32

qq_37591637 · 2019-05-14 09:40:32 发布

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

效果如下

代码如下

<!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:[]这个里面专门放参数，也是参数入口的一个方法吧

子组件

父组件

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^