小程序-父组件获取子组件实例

最新推荐文章于 2024-10-10 14:42:09 发布

上帝喜欢糖

最新推荐文章于 2024-10-10 14:42:09 发布

阅读量750

点赞数 1

文章标签： javascript 开发语言小程序

本文链接：https://blog.csdn.net/qq_20623665/article/details/129491380

版权

文章详细描述了在组件化开发中，子组件如何通过绑定ID并利用`this.selectComponent`在父组件中获取实例，以及子组件如何通过`bind:tap`和`triggerEvent`向父组件传递值。同时，提到了使用`getCurrentPages()`获取页面栈的方法。此外，还展示了两种CSS布局方式，将子元素放置于父元素的右下角。

摘要由CSDN通过智能技术生成

子组件绑定id=" 自定义 "

<authorization id="autComponents"></authorization>

父组件在.js文件中下面方法获取实例

this.selectComponent('#autComponents')

子组件实例

==========================分割线==========================================

子组件向父传值

子组件设置点击事件

<button bind:tap="handelEmit">aut组件按钮</button>

子组件使用triggerEvent,第一个参数抛出事件,第二参数,抛出值

 /**
   * 组件的方法列表
   */
  methods: {
    handelEmit(){
      // console.log(111);
     this.triggerEvent('sonEvent','你好啊')
    },
  }

父组件中

子组件绑定子组件抛出的事件

<authorization id="autComponents" bind:sonEvent="onEvent"></authorization>

定义函数,打印事件对象e

  onEvent(e){
  console.log(e);
  },

拿到子组件抛出的值e.detail

===========================分割线===========================

拿取页面栈方法---直接调用不需要this

getCurrentPages()

打印结果-数组形式呈现

==================分割==========================================

父元素开启弹性盒子，到右下角

html

 <body>
    <div class="box">
      <div class="son"></div>
    </div>
  </body>

css

第一种

    <style>
      .box {
        width: 500px;
        height: 500px;
        background-color: pink;
        margin: 0 auto;
        display: flex;
        justify-content: end;
        flex-direction: column;
      }
      .son {
        width: 100px;
        height: 100px;
        background-color: green;
       
      }
    </style>

第二种

<style>
      .box {
        width: 500px;
        height: 500px;
        background-color: pink;
        margin: 0 auto;
        display: flex;
      }
      .son {
        width: 100px;
        height: 100px;
        background-color: green;
        align-self: end;
      }
    </style>

实现