父组件:
<!-- .default: 绑定小程序冒泡型事件,如bindtap,.default后缀可省略不写;
.stop: 绑定小程序捕获型事件,如catchtap;
.user: 绑定用户自定义组件事件,通过$emit触发。注意,如果用了自定义事件,则events中对应的监听函数不会再执行。 -->
<template>
<Test @childFn.user="parentFn" :title="parentTitle1" :syncTitle.sync="parentTitle" :twoWayTitle.sync="parentNum" /> <view>{{reversedMessage}}</view>
</template>
import Test from './test';
components = {
Test:Test
};
watch = { parentNum (newValue, oldValue){ console.log(newValue,oldValue) } }; data = { parentTitle: '666', parentTitle1:'123', parentNum:1, }; computed = { // 计算属性reversedMessage,在脚本中可通过this.reversedMessage来引用,在模板中可通过{{ reversedMessage }}来插值 //只要是组件中有任何数据发生了改变,那么所有计算属性就都会被重新计算。 reversedMessage() { return '长沙市教育局'.split('').reverse().join('') } }; methods = { //$invoke是一个页面或组件对另一个组件中的方法的直接调用,通过传入组件路径找到相应的组件,然后再调用其方法。 //this.$invoke('ComA', 'someMethod', 'someArgs'); //this.$invoke('./../ComB/ComG', 'someMethod', 'someArgs');//someMethod方法名 someArgs参数 //父组件中的方法 parentFn(num){ this.parentNum += 1; this.$apply(); console.log(this.parentNum) this.$invoke('Test','testConsole','666')//调用Test组件中的testConsole方法,并传递参数666 }, }
//子组件 <template> <view bindtap="toClick"> {{title}}{{syncTitle}}{{twoWayTitle}} </view> </template> <script> import wepy from 'wepy' export default class Test extends wepy.component { data = { }; props = { // 静态传值 父子组件数据完全独立互不干扰 title: String, // 父向子单向动态传值 ,父组件传值用.sync修饰符来达到父组件数据绑定至子组件的效果 syncTitle: { type: String, default: 'null' }, // twoWay: true来达到子组件数据绑定至父组件的效果 //如父组件传值用到了.sync修饰符,子组件中同时设置了twoWay:true,则可以达到双向绑定 twoWayTitle: { type: Number, default: 'nothing', twoWay: true } }; methods = { toClick(){ //(this.$parent.parentTitle)调用父组件传过来的数据 this.$emit('childFn', 100) }, //测试通过$invoke调用其他组件中的方法 testConsole(arg){ console.log(arg) } } onLoad() { //console.log(this.title); //console.log(this.syncTitle); //console.log(this.twoWayTitle); } }; </script>