微信小程序学习第六天（使用组件，组件内外样式，父传子，父传子，插槽，component组件）

使用组件

一、创建了组件，然后使用组件
再home里使用，那么就要在home.json里面的useingcomponent里面
参数说明 第一个是使用这个组件时的标签名 第二个是组件的路径，比如下面这个再component目录下有my-cpn目录里面的my-cpn

使用的时候直接用标签名

<my-cpn></my-cpn>

组件内外样式

四、组件内外样式会不会被影响

如果想要别影响呢
再组件里的js文件中


五、给组件内部传值和样式
给组件传值和vue父级给子级传值是一样的
但是使用的单词不一样
首先再使用组件标签那里vue是如

:title=title

再小程序里面也一样，再组件的js文件中接收值是这样的

父传子

下面讲述一下传值和创样式的具体操作
首先创建一个组件
然后再home.json注册一下

然后设置一下组件的内容（设置一个titleclass 是为了展示传过来的样式）

设置一下用来接收参数的设置

然后使用并且传值，titleclass定义的是class，用来设置样式

然后设置样式

那子级传递数据到父级呢
其实也和vue一样，只不过单词不一样
发出事件，再methods里面写方法，使用的单词是this,triggerEvent


接收事件


如果有数据呢，如再子组件中传递这个参数

然后父组件直接再方法内使用

数据存在detail里面
顺便来做个tab控制实战
首先创建一个tab组件，然后注册，然后传值，然后设置样式，下面设置样式

然后再点击的时候实现哪一个活跃，哪一个变红色，由于用到wx:for，所以使用block
然后

<view class="tab-controll">
  <block wx:for="{{title}}" wx:key="{{index}}">  
  <view class="tab-item {{currentindex == index ? 'active' : ''}}"  //这里着重理解
  data-index="{{index}}" bind:tap="itemclick"> //把index传到函数里使用
  <text>{{item}}</text>
  </view>
  </block>
</view>

活跃的样式

.active{
  color: red
}
.active text{
  padding: 20rpx 10rpx;  //下面横线的控制样式
  border-bottom: 6rpx solid red
}

利用index来控制点击哪个哪个就活跃

  methods: {
    itemclick(event){
      console.log(event)
      const index = event.currentTarget.dataset.index
      this.setData({
        currentindex: index
      })
    }
  }

父亲改变子组件的数据

六、通过父级改变子级组件的值
比如实现父级的按钮，改变子组件的值
再父级点击的时候发出事件，然后获取子组件，然后通过子组件来改变值

  addcount(){
    const sel_com = this.selectComponent('#tab')  //获取的是id值
    sel_com.setData({
      count: sel_com.data.count + 10
    })
  }

<tab title="{{['大傻逼','二傻逼','小傻逼']}}" id="tab"/>  //这里设置id值

但是上面这种方式不合理，再别的组件修改别的组件的数据是不合理的，只有回到自己的组件里修改才合理
可以这样

  addcount(){
    const sel_com = this.selectComponent('#tab')
    sel_com.incount(10)   //这里运行这个方法
  }
})

再组件里面设置这个方法

incount(num){
  this.setData({
    count: this.data.count + num 
  })
}

插槽

七、微信小程序中插槽的使用
和vue的原理一样。
但是多个插槽的使用就不一样。
首先再子组件这里设置三个插槽，然后用calss包裹，因为插槽是被替换的，所以比如设置class样式的时候，被替换就没有了。
然后使用name给插槽起名字

然后使用插槽，使用slot属性对应name来使用

但是再微信小程序里面这样还是不行的，需要加个东西，再js页面，加一个options属性

component组件

七、下面来讲

第一个接收样式
第二个是监听数据改变
首先再组件里面

<view>白菜价格{{price}}</view>
<view>数量：<input type="number" bindinput="change" value="{{count2}}"></input></view>
<view>总价格: {{priceall}}</view>

然后子啊js文件中

Component({
  data: {
    price:2,
    count2: 1,
    priceall: 2
  },
  methods: {
    change(e){
      let counts = e.detail.value   
        count2: counts
      })
    }
  },
  observers:{
    'count2':function(newVal){
      console.log(newVal)
    },
    'count2,price'(count2, price){
      this.setData({
        priceall: count2 * price
      })
    }
  }
})

页面生命周期

组件生命周期