建网站详细教程,用c 建网站时怎么做导航菜单栏,玉溪网站设计,网页制作基础教程本社首先在我们可以直接写到需要的 page 中#xff0c;然后再进行抽取组件#xff0c;自定义组件建议wxzx-xxx命名例如#xff0c;我们封装的组件名为 **wxzx-loadmorewxzx-loadmore.wxml正在加载{{tip}}这里就是把index.wxml中的需要封装成组件的代码原样copy过来wxzx-loadmore…首先在我们可以直接写到需要的 page 中然后再进行抽取组件自定义组件建议wxzx-xxx命名例如我们封装的组件名为 **wxzx-loadmorewxzx-loadmore.wxml正在加载{{tip}}这里就是把index.wxml中的需要封装成组件的代码原样copy过来wxzx-loadmore.jsComponent({/*** 组件的属性列表*/properties: {response: {type: String,value: },is_loadmore: {type: Boolean,value: false},tip: {type: String,value: 我是有底线的}},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {emit: function(data) {// 自定义组件向父组件传值let val data,my_event_detail {val: val}// myevent自定义名称事件父组件中使用this.triggerEvent(myevent, my_event_detail)/*在父组件中写上bind:myeventget_emit,在父组件中就需要调用get_emit事件*/},}})index.wxml 父组件response{{comment_list}}is_loadmore{{is_loadmore}}bind:myeventget_emitindex.js 中// 接受子组件的传值get_emit: function(e) {this.setData({is_show: e.detail.val})},index.json 这里需要引入组件在哪个父页面中引用子组件就在哪个json文件中引入{usingComponents: {wxzx-loadmore: /component/wxzx-loadmore/wxzx-loadmore}}父组件向子组件传参声明A组件为父组件B组件为子组件以下是A组件向B组件传参在A组件中引入B组件在A组件的json中写入{component: true,usingComponents: {componentB: ../child2/child2}}在A组件的wxml中写入我是组件A子组件内容在B组件的js中写入Component({behaviors: [],properties: {paramAtoB:String},data: {}, // 私有数据可用于模版渲染// 生命周期函数可以为函数或一个在methods段中定义的方法名attached: function() { },moved: function() { },detached: function() { },methods: {}})即在properties中定义A组件要传过来的参数类型在B组件的wxml中写入我是组件BA中传入的参数{{paramAtoB}}总结 A组件向B组件传参实际上就是在A组件中引入B组件的时候带上一个属性paramAtoB并且给其赋值然后B组件通过这个属性名称paramAtoB获取其值子组件向父组件传参声明A组件为父组件B组件为子组件以下是B组件向A组件传参要让子组件给父组件传参首先得在父组件引入子组件的时候加个触发事件如下在父组件A中wxml:我是组件AA组件内容B组件传入参数{{paramBtoA}}myevent就是绑定的触发事件在父组件A中js:Component({behaviors: [],properties: {},data: {}, // 私有数据可用于模版渲染// 生命周期函数可以为函数或一个在methods段中定义的方法名attached: function() { },moved: function() { },detached: function() { },methods: {onMyEvent:function(e){this.setData({paramBtoA: e.detail.paramBtoA})}}})onMyEvent就是当被子组件触发时的函数在子组件B中wxml:我是组件BA中传入的参数{{paramAtoB}}向A中传入参数button按钮点击事件一触发就可以传入参数进入父组件A中在子组件B中js:Component({behaviors: [],properties: {paramAtoB:String},data: {}, // 私有数据可用于模版渲染// 生命周期函数可以为函数或一个在methods段中定义的方法名attached: function() { },moved: function() { },detached: function() { },methods: {change:function(){this.triggerEvent(myevent, { paramBtoA:123});}}})this.triggerEvent就是按钮点击之后执行的事件触发myevent事件传入参数paramBtoA进入父组件