slot $emit $forceUpdate vue 传参父传孙

slot

父组件
<child>
	// 三种写法
	<button slot="button"></button>
	<button v-slot:button></button>
	<template #button></template>
</child>

子组件
	<slot name="button"></slot>



作用域插槽

父组件
<child>
	   // 两种写法 
	  <!-- 语法：v-slot:default="随意取的名字" default替换成插槽的name值-->
      <template v-slot:a="aq">{{aq.users.username}}</template> // 页面打印阿保机
      // {} 里面的必须和传过来的动态属性名一致
       <template v-slot:a="{users}">{{users.username}}</template>
</child>

子组件
<slot name="a" :users="msg"></slot>
<script>
export default {
  data() {
    return {
      msg: {
        username: '阿保机'
      }
    }
  }
}
</script>

$emit

// 父组件调用子组件
<child-component @submitToParent="parentSubmit"></child-component>
... ...
// 父组件中被触发的方法，接受到子组件传来的参数
parentSubmit(value){
    // 父组件的逻辑处理
}

// 子组件方法：触发父组件方法，并传递参数data到父组件
handleSubmit(value){
    this.$emit('submitToParent', value)
}

｜$forceUpdate() 强制更新用法

｜父传孙

父组件
<div>
    // 子组件
	<child :data="数据"></child>
</div>

子组件
<div>
	// 孙组件
	<grand v-bind="$attrs"></grand>
</div>
export default {
  // 继承所有父组件的内容
  inheritAttrs: true
}

孙组件
<div>
	{{data}} //数据
</div>
export default {
	props:{
		data:String
	}
}