16 子组件和父组件之间传值

2024-09-08 11:48

文章标签 16 组件传值之间

本文主要是介绍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>