Vue组件传参

• scoped 样式隔离 在style中添加有scoped属性的样式 只可以在本组件中使用

  • 1 给每个组件添加 data-v-id
  • 2 给组件的每个样式都添加属性[data-v-id]
  • 3 写的样式都是添加属性的样式在别的组件里面就不起用了
  • 如果不添加scoped 那么使用导入本页面的页面也可以使用本页面中所声明的类/样式
  • 添加了以后则可以进行样式隔离 避免样式冲突

• 组件的传参 就是将父app.vue 传给COounterCom.vue

  • 主要是用的就是props

• 组件的定义与使用

  • 定义组件

    • CounterCom.vue中

  • 使用组件

    • 1 导入
      • import CounterCom from './components/CounterCom.vue'
    • 2 注册
      • components:{CounterCom}
    • 3使用

• 组件父传子传参

  • 使用props 父传给子的数据是只读的(做默认值或者读取显示) 不能进行修改

    • App.vue文件中
    • • App.vue文件中
      • 1 接受参数冰定义默认值
        • porps:{
        • "num":{type:Number,default:1}
        • }
      • 2 使用参数num
        • data(){
        • return {counter:this.num}
        • }

• 组件子传父传参

  • 使用的时间#emit
  • COunterCom.vue 文件中
  • App.vue文件中
  • $emit(事件名,事件值) 发送一次事件, 事件名(counterchange)和事件值(counter)是自定义的=
  • $event 固定写法,事件的值(counterchange事件的值,也是子组件$emit的第二个参数)

  • 组件传参

    • 父传子

      

    • 子传父

      

• 组件的设计

  • 做一个组件需要设计定义的东西

    

    • props
      • 默认值:value
      • 最大值:max
      • 最小值:min
      • 步进制:step （用来操作每次加多少）
    • data
      • 被改变的值
    • methods
      • 加 add
      • 减 minus
    • 事件
      • numchange (当数字发生变化)
    • template 组件所需要用到的标签属性
      • -
      • +