Vue组件传值

最新推荐文章于 2024-10-22 16:27:40 发布

友人C君~

最新推荐文章于 2024-10-22 16:27:40 发布

阅读量188

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/CWH0908/article/details/93069395

vue 专栏收录该内容

29 篇文章

订阅专栏

父组件向子组件传递数据（props）

<body>
	<div id="app">
          /*在标签内使用父组件的数据*/
		<my-component :parrentmessage="message"></my-component>

	</div>

	<script>
		var vm = new Vue({

			el: "#app",
			data: {
				message: "--------这里是父组件的数据"

			},
			methods: {


			},
			components: {
				"myComponent": {
					template: "<h4>这是子组件 {{parrentmessage}}</h4>",
					//props是存放父组件传递的数据的，在props数组中先声明，然后自定义标签的组件中使用父组件的数据，是只读的。
					props: ['parrentmessage'], //创建组件的属性值,注意，props是数组
					data: function () {
						return {
							//子组件自身私有的数据，可用于存放Ajax请求回来的数据，是可读可写的
						}
					},
				},

			}

		});
	</script>
</body>

父组件向子组件传递函数（this.$emit）

<body>

	<div id="app">
		<!--子组件事件绑定父组件中的函数-->
		<my-component @parrentfunc="show"></my-component>
	</div>

	<script>
		var vm = new Vue({

			el: "#app",
			methods: {
				show: function () {
					console.log("这是来自父组件的show函数")
				}
			},
			components: {
				"myComponent": {
					data: function () {
						return {
							sonMessage: "子组件的Message",
						}
					},
					template: "<div><h4>这是子组件</h4> <input type='button' @click='sonfunc' value='后台调用复组件的show方法'/></div>", //在子组件中首先绑定子方法
					methods: {
						sonfunc: function () { //在子方法中使用this.$emit来调用标签中绑定的父组件的方法
							//this.$emit函数第一个参数为子组件中绑定父组件的函数名，之后的参数可为调用父组件函数的参数
							this.$emit('parrentfunc');
						}
					}
				},
			}
		});
	</script>
</body>

子组件向父组件传递数据（另存this$emit的参数）

<body>

	<div id="app">

		<my-component @parrentfunc="show"></my-component>

	</div>

	<script>
		var vm = new Vue({

			el: "#app",
			data: {
				fatherMessage: null, //默认为空
			},
			methods: {
				show: function (data) {
					this.fatherMessage = data, //将子组件中调用该函数的参数另存为父组件的数据，实现子组件向父组件传值。
					console.log("这是来自父组件的show函数----这是数据" + data)
				}
			},
			components: {
				"myComponent": {
					data: function () {
						return {
							sonMessage: "子组件的Message",
						}
					},
					template: "<div><h4>这是子组件</h4> <input type='button' @click='sonfunc' value='后台调用复组件的show方法'/></div>", //在子组件中首先绑定子方法
					methods: {
						sonfunc: function (data) { //在子方法中使用this.$emit来调用标签中绑定的父组件的方法
							//this.$emit函数第一个参数为子组件中绑定父组件的函数名，之后的参数可为调用父组件函数的参数
							this.$emit('parrentfunc', this
							.sonMessage); //直接将子组件data中的数据对象作为参数调用父组件的方法，当在父组件中另存子组件的数据时，便实现了子组件向父组件传值
						}
					}
				},

			}

		});
	</script>
</body>