VUE(uni-app框架)开发微信小程序⑧-组件传参(子传父)

子传父：

        1.子组件通过触发事件的方式向父组件传递数据

        2.父组件通过监听事件的方式来接收数据

第一步：在子组件data中自定义数据

        data(){
			return {
				text:"大家好，我叫张三，我今年12岁，来自清华大学少年班"
			}
		},

第二步：在子组件中创建一个方法用于触发事件，并传递参数

   <button @click="handleClick" :text="this.text" >点击</button>

 第三步：在子组件中实现该方法

methods:{
            //子传父，通过触发事件
            handleClick(){
                //this.$emit("自定义的事件名称","要传递的参数")
                this.$emit("textChange",this.text);
            }
        }

第四步：在父组件中定义一个参数用于接收数据

        data(){
			return {
				text:""
			}
		},

第五步：引入子组件

import introduce from "@/components/Introduce";

第六步：在父组件中接收子组件方法和参数

 <introduce @textChange="handleChange" :text="text" ></introduce>

第七步：引入组件，并通过监听事件接收参数

//3.注册组件
		components:{
			introduce
		},methods:{
            handleChange(e){
                this.text =e;
            }
        }

贴一下字符组件完整代码

最后贴一下执行前和执行后效果图：

 到这儿，组件传参(子传父)就算是完了。