本文主要是介绍16 子组件和父组件之间传值，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
划重点
- 子组件 / 父组件 定义
- 组件中：props 的使用
- 组件中：data 的使用(有 return 返回值) ； 区别：Vue中的data （没有返回值）;
- 组件方法中 emit 的使用：emit:英文原意是：触发、发射 的意思
- components :直接在Vue的方法中声明和绑定要使用的组件
小炒肉：温馨可口
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="./lib/vue-2.6.10.js"></script>
</head><body><!-- 需要实现的是：子组件 和 父组件（Vue）之间传值总体逻辑是：通过点击组件（子组件）事件调用 Vue中的函数；；而 在子组件中传值可以在Vue函数中进行使用
1: 在Vue中定义个 函数如： vuemethods()
2:定义一个组件 点击组件 可以调用 Vue中的函数 vuemethods 方法；如果这个方法中有参数，可以通过组件传递参数给这个方法：vuementhods--><div id="app"><!-- 在 组件：comname1中通过 绑定一个名字为：msgcom1 的事件：vuemethods 也即是： 把Vue中的函数：vuemethods 复制给 了一个在组件中名字为：msgcom1的函数属性这里的 msgcom1 可以自己任意命名--><comname1 v-on:msgcom1="vuemethods"></comname1></div><template id="comname1"><div><h3>{{ msg2 }}</h3><a href="" @click.prevent="clickMsg">点击</a></div></template><script>var comtem1 = {template: '#comname1',//注意：组件中的所有的 props中的数据；都是通过 父组件传递给子组件的//props中的数据 都是只能读 ；不能重新赋值 props是一个数组 ；；；//props主要是处理：子组件向父组件（Vue中的components）传递数据使用的； 如 在 emit中的参数 temmsg就是传递的值给 了Vue中的 methods--> vuemethods 中的参数props: ['msgcom1'], //这个名字msgcom1 就是父组件传递过来的属性名字；data: function () {//这一行可以简写成：data(){}return { temmsg: 'temp中的data定义123456',msg2:'22'}},methods: {clickMsg() { //注意：如何使用 props 和 emit ?//emit：英文原意是：发射/触发的意思 //this代表 comtem1 对应的上下文；//emit中的参数：第一个必是 对应的子组件的自定义的事件的名称：可以只有这一个参数：也即是只是调用了父组件的函数；不传递值如：//this.$emit('msgcom1') ；这是不带有参数的//如果带有参数；如一个参数或者两个或者多个；那么就是直接在后面依次写入就可以//如：带有两个参数（对应的父组件中的方法如果要使用这些参数；那么其父组件的方法也要是含有参数的 ）this.$emit('msgcom1' ,this.temmsg,"-------我是参数2")}}}var vm = new Vue({el: '#app',data: {},methods: {vuemethods(data,data2) {alert("组件之间传递～～～" +data+data2)}},components: {//comname1：组件的名字； comtem1：定义的template 的名称comname1: comtem1}})</script>
</body></html>一张图片 ~ ~ ~
这篇关于16 子组件和父组件之间传值的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
