插槽的使用 跟 监听属性

默认插槽

子组件

<template>
   <div class="classify-box">
       <div class="title">{{name}}</div>
       <slot></slot>  //slot设置默认插槽来占位
   </div>
</template>
 
<script>
export default {
   name:'Classify',
   data() {
    return {    
    }
   },
   props:['name']   //propos接收传来的标题名称
}
</script>
 

父组件

<template>
  <div class="app-box">
    <Classify name='热门电影'>  //使用组件并在组件标签体中书写要放进插槽中的内容
         <ul>
            <li>肖申克的救赎</li>
            <li>1912</li>
            <li>零的执行人</li>
         </ul>
     </Classify>
     <Classify name="风景">
          <img src="./img/QQ图片20220818163031.jpg" alt="">
     </Classify>
  </div>
</template>
 
<script>
import Classify from './components/classify.vue'  //引入组件
export default {
  name: 'App',
  data() {
    return {   
    }
  },
  components: {     
      Classify:Classify   //注册组件
  }
}
</script>

 

具名插槽

子组件

<template>
   <div class="classify-box">
       <div class="title">下面是具名插槽的内容</div>
       <slot name="header"></slot>
       <slot name="body"></slot>
       <slot name="footer"></slot>
   </div>
</template>
 
<script>
export default {
   name:'Classify',
   data() {
    return {   
    }
   },
}
</script>

父组件

<template>
  <div class="app-box">
    <Classify>
      <div slot="header">
         <span>我在header插槽中</span>
      </div>  
      <div slot="body">
         <span>我在body插槽中</span>
      </div>  
      <div slot="footer">
         <span>我在footer插槽中</span>
      </div>
     </Classify>
  </div>
</template>
 
<script>
import Classify from './components/classify.vue'
export default {
  name: 'App',
  data() {
    return {
      
    }
  },
  components: {
      Classify:Classify
  }
}
</script>

作用域插槽

子组件

<template>
   <div class="classify-box">
       <div class="title">下面是作用域插槽的内容</div>
       <slot :hobby="hobby"></slot>
   </div>
</template>
 
<script>
export default {
   name:'Classify',
   data() {
    return {   
      hobby:['打游戏','睡大觉','吃大餐']
    }
   },
}
</script>

父组件

<template>
  <div class="app-box">
    <Classify>
        <template slot-scope="{hobby}">
            <ul>
              <li v-for="(h,index) in hobby" :key="index">{{h}}</li>
            </ul>
        </template>
    </Classify>
  </div>
</template>
 
<script>
import Classify from './components/classify.vue'
export default {
  name: 'App',
  data() {
    return {
      
    }
  },
  components: {
      Classify:Classify
  }
}
</script>

监听属性

一个监听数值的例子

    <div>
      <ul>
        汇率换算
        <br />数量:
        <input style="display: inline-block;width:50px" type="text" v-model="numm" />人民币====
        <br />
        美元:
        {{ doller }}
        <br />
        欧元:{{ rmb }}
        <br />
        韩元:{{ rmb1 }}
        <br />
        澳元:{{ rmb2 }}
      </ul>
    </div>


 data() {
    return {
      num: 1111,
      numm: 0,
      rmb: 0,
      rmb1: 0,
      rmb2: 0,
      doller: 0
    };
  },
  watch: {
    numm(newvalue, oldvalue) {
      console.log(newvalue, oldvalue); //会打印两个值，原来的值和新的值
      this.doller = this.numm * 0.1366;
      this.rmb = this.numm * 0.1292;
      this.rmb1 = this.numm * 185.47;
      this.rmb2 = this.numm * 0.2155;
    }
  },