在小程序开发过程中，经常出现组件套组件的情况，所以经常出现父组件向子组件传值，子组件向父组件传值的情况，通常都是怎样解决的呢？
这里我用两个小案例来演示一下

1.父组件向子组件传值
2.子组件删除父组件数据

下面让我来模拟一下：

<mark>首先我创建了两个组件和一个页面</mark>

组件：list组件和 item组件 他们都在courses目录下，
页面：在和courses同级路径下我创建了index目录，并将index页面放在其中

这里：我让list组件为中间组件，也就是list组件是item的父组件，index页面调用list组件

<mark>首先index页使用list组件</mark>
代码如下：

在index页面的index.json文件中，添加引用

{
  "usingComponents": {
    "c-list":"../components/courses/list"
  }
}

然后调用它

在index.wxml中调用

<c-list/>

页面准备工作完成

接下来在list组件中完成对item组件的调用

方法同上：
首先在list.json中添加引用

{
  "component": true,
  "usingComponents": {
    "c-item":"./item"
  }
}

然后在list.wxml中调用：

<view>
  <c-item/>
</view>

完成之后

我要从list中向item中传递参数

先在
list.js中定义data属性：

  list:[
      "vue",
      "mina"
    ]

然后改造引用代码
此时将list.wxml改造成：

<view>
  <c-item  title="{{item}}" wx:for="{{list}}"/>
</view>

然后打开item组件
首先在item.js中定义属性

然后打开item.wxml：
输入：

<view>
{{title}}
</view>

这就实现了父组件向子组件传值

保存，你就可以看到效果了

然我我再做一个在子组件中，删除父组件的数据

首先在子组件中添加代码：

<view class="item">
  {{title}}
  <text class="del"  bindtap="delItem">X</text>
</view>

在item.wxss中添加样式

.item{
  width: 100%;
  height: 200rpx;
  border-bottom: 2rpx dotted gray;
  font-size: 60rpx;
}
.del{
  color: red;
}

效果如下：

然后在item.js中定义delItem方法

<mark>但是我们要删除上面列表中的某项数据的时候，我们需要获取到它的Index值，所以我们现在去它的父组件也就是list组件中定义我们想要的东西：</mark>

我们将index定义为idx

然后我们回到item定义idx数据

现在我们可以写我们上面定义的delItem方法了：

 delItem(){
      // console.log(this.data.idx);
      this.triggerEvent("del", { id: this.data.idx},{})
    },

写到这里，我们距离我们需求的实现就很近了

接下来我们回到list组件中完成最后的工作

注意：

<mark>这里对triggerEvent方法解释一下，在微信开放文档中，</mark>

解释是这样子的，具体详细解释请自己在开发文档中查询

所以我们对list组件的wxml代码更改：

<view>
  <c-item binddel="delCourse" idx="{{index}}" title="{{item}}" wx:for="{{list}}"/>
  //这里的bindedel 意思是自定义del方法，
  //binddel="delCourse"意思是：执行del方法时，会执行callback方法，其中delCourse就是callback方法，也就是执行del方法是，delCourse也会执行
</view>

接下来到最后一步：定义delCourse方法

 delCourse(e){
      console.log("删除",e.detail);
      let id=e.detail.id;
      this.data.list.splice(id,1);
      this.setData({
        list:this.data.list
      })
          }

注意：

e.detail用来获取item.js中的this.triggerEvent(“del”, { id: this.data.idx},{ })这句话中向父组件传递的index值

控制台 console.log(“删除”,e.detail);显示如下：

保存后就可以完成删除操作了

不会制作动图，这里就不再演示了！！！

欢迎探讨，欢迎交流，如有错误，欢迎指出！！！