vue 父子间组件传值

最新推荐文章于 2021-11-27 19:46:00 发布

weixin_30767921

最新推荐文章于 2021-11-27 19:46:00 发布

阅读量89

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wangyunhui/p/9122336.html

本文介绍了Vue.js中父组件向子组件传递属性及子组件向父组件发送事件的方法，并通过实例展示了具体的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.父组件向子组件传值：

　　实例截图：

　　实例代码：

/*子组件代码*/     //child.vue
<template>
  <div style="border: 1px solid red;margin: 10px;">
  	<h2>子组件</h2>
    <p>{{name}}</p>
  </div>
</template>

<script>
export default {
	props:{
		name:{
			//类型 普通类型：字符串（String）、数字（Number）、布尔值（Boolean）、空（Null）引用类型：数组（Array）、对象（Object）
			/*其中，普通类型是可以在子组件中更改，不会影响其他兄弟子组件内同样调用的来自父组件的值，但是，引用类型的值，当在子组件中修改后，父组件的也会修改，那么后果就是，其他同样引用了改值的子组件内部的值也会跟着被修改。除非你有特殊的要求这么去做，否则最好不要这么做。*/
			type:String,  
			require:true,
			default: "",  //默认值
			validator: function (value) {   //验证器
	        	return value;
	      	}
		},
		
	},
  data () {
    return {
      val:this.name
    }
  },
  mounted(){
  	console.log(this.name);
  	console.log(this.val);
  },
}
</script>

/*父组件代码*/
<template>
  <div class="hello">
  	<h1>父组件</h1>
  	<input v-model="msg">
    <Child :name="msg"></Child>  
  </div>
</template>
<script>
	import Child from "@/components/child"
export default {
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components:{
  	Child
  },
}
</script>

　2.子组件向父组件传值：

　　　　实例截图：

　　　　实例代码：

/*子组件*/
<template>
	<div style="border: 1px solid red;margin: 10px;">
		<h2>子组件</h2>
		<p>{{val}}</p>
		<button @click="sendMsg">向父传值</button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				val: "aaaaaa"
			}
		},
		methods:{
			sendMsg(){
				this.$emit("listen",this.val);
			},
		},
	}
</script>

/*父组件*/
<template>
  <div class="hello">
  	<h1>父组件</h1>
  	<input v-model="msg">
    <child  @listen="show"></child>  
  </div>
</template>
<script>
import child from "@/components/child1"
export default {
	components:{
	child
},
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods:{
  	show(val){
  		this.msg=val;
  	},
  },
}
</script>