组件传值-小程序和vue

vue模板

• 父传子 - 通过属性传值

父页

index.vue

</template>
	<div>
		//byVal传参
		<Module :byVal="byVal"></Module>
	</div>
</template>

<script>
import Module from "./components/Module"; //你的组件路径
export default {
  components: { Module },
  data() {
    return {
      byVal:''
    };
  },
  methods: {

  },
};
</script>

子页
child.vue

export default {
  props: ["byVal"], //直接使用
  data() {
    return {};
  },
};

• 子传父 - 通过$emit()

子页
child.vue

  this.$emit("paramFn",value);  //第一个是自定义事件名，第二个是要传递的值

父页
index.vue

 //父组件中的子组件标签中绑定自定义事件
 <Module @paramFn="paramFn"></Module>
export default {
  components: { Module },
  data() {
    return {
    };
  },
  methods: {
    //value为子组件传的值
	paramFn(value) {},
};

},

小程序模板

• 父传子 - 通过属性传值

父页
wxml

 //byVal传参
 <module id="module" byVal="{{byVal}}"></module>

json

{
  "component": true,
  "usingComponents": {
     "module": "../../component/module/module" //你的组件路径
  }
}

js

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
 //  页面初次渲染完成后，使用选择器选择组件实例节点，返回匹配到组件实例对象  
 this.myComponent = this.selectComponent('#module ')
},
changeFn(){
 let myComponent = this.myComponent
 myComponent.getData() // 调用自定义组件中的方法
}

子页
js

Component({
   /**
   * 组件的属性列表
   */
  options: {
    addGlobalClass: true
  },
  //接收的数据
  properties: {
    byVal: {
      type: String,
      value: null
    },
  },
  //监听数据的更改
  observers:{
   "byVal"(data){
      data ===this.data.byVal //这里不要写this.setData({})
	}
  }
  /**
   * 组件的初始数据
   */
  data: {
  },
  /**
   * 组件的方法列表
   */
  methods: {
  	getData(){}
  },
})

• 子传父 - 通过triggerEvent()

子页
wxml

 this.triggerEvent("paramFn",param)  //第一个是自定义事件名，第二个是要传递的值（可以为空）

父页
wxml

 //父组件中的子组件标签中绑定自定义事件
 <module id="module "  bindparamFn="paramFn"></module>

js

//e为子组件传过来的值
paramFn(e) {},