Vue子父组件传值

父子关系

父组件向子组件传值

1. 在父组件引入子组件

Vue.component('son-item',{
    // props:['title'],
    data(){
      return {
        submsg:'子组件数据'
      }
    },
    template:'<div>{{submsg+"---"+title}}</div>'
 })

2. 父组件调用子组件

// 静态属性绑定
<son-item title="来自父组件的值"></son-item>
// 动态绑定
<son-item :title="msg"></son-item>

3. 子组件引入props

// 使父组件的值可以在子组件使用
props:['title']

props命名规则

• 在props中使用驼峰，在模板中使用短横线
• 字符串模板无区分

子组件向父组件传值

通过自定义事件向父组件传递事件

1. 子组件自定义事件

// 子组件
template:`<button @click="$emit('enlarge-text')">{{fTitle}}</button>`

2. 父组件监听子组件事件

<span :style="{fontSize:fontSize+'px'}">{{msg}}</span>
<son-item :f-title="msg" @enlarge-text="handle"></son-item>

var app = new Vue({
  el: '#app',
  data: {
    msg: '父组件数据',
    // 字体大小数值
    fontSize:10
  },
  methods: {
  // 定义改变字体大小方法
    handle(){
      this.fontSize+=3
    }
  },
})

通过自定义事件向父组件传递参数

1. 子组件自定义事件

// 传递参数
template:`<button @click="$emit('enlarge-text',5)">{{fTitle}}</button>`

2. 父组件监听子组件事件

// $event为固定用法，代表传递过来的值
<son-item :f-title="msg" @enlarge-text="handle($event)"></son-item>

methods: {
  handle(val){
    this.fontSize+=val
  }
}

兄弟关系

事件中心

1. 定义两个子组件

Vue.component('test-tom',{
data(){
  return{
    num:0
  }
},
template:`
  <div>
    <div>TOM:{{num}}</div>
    <div>
      <button @click="handle">点击</button>
    </div>
  </div>
`,
methods: {
  handle(){
    hub.$emit('tom-event',1)
  }
},
mounted () {
  hub.$on('tom-event',(val)=>{
    // val为兄弟组件传的值
    this.num+=val
  });
}
})
Vue.component('test-jerry',{
data(){
  return{
    num:0
  }
},
template:`
  <div>
    <div>JERRY:{{num}}</div>
    <div>
      <button @click="handle">点击</button>
    </div>
  </div>
`,
methods: {
  handle(){
    hub.$emit('jerry-event',2)
  }
},
mounted () {
  hub.$on('jerry-event',(val)=>{
    // val为兄弟组件传的值
    this.num+=val
  });
}
})

2. 调用子组件

<test-tom></test-tom>
<test-jerry></test-jerry>

3. 定义事件中心

// 事件中心
var hub=new Vue();

4. 监听事件中心

mounted () {
  hub.$on('jerry-event',(val)=>{
    // val为兄弟组件传的值
    this.num+=val
  });
}

销毁事件

handle(){
  hub.$off('tom-event')
  hub.$off('jerry-event')
}

组件插槽

具名插槽

在子组件的模板中放<slot></slot>
在父组件中组件中间可以放值=>传递给solt

高级用法可以给插槽一个属性值，可以根据属性名调用相应插槽

作用域插槽

父组件对子组件的数据进行加工

<template slot-scope="slotProps">
</template>