vue组件抽离的写法（数据传输）

一直看网上说有两种，我就直接使用注册组件这一种
组件之间涉及到的数据传输，大致分为这几种：

父传子（某页面传给公共组件）：

比如，对于不同的页面，头部的中间内容title可能都不一样：
(父通过属性传递，子通过prop接收)
子组件

<template>
    <div class="header">
        <slot name="left"></slot>
        <span class="header_title">
            <span class="header_title_text ellipsis">{{ title }}</span>
        </span>
        <slot name="right"></slot>
    </div>
</template>

<script>
export default {
  name: 'HeaderTop',
  props: {
    title: String
  }
}
</script>

父组件

<template>
    <div class="profile">
        <HeaderTop title="个人中心"></HeaderTop>
    </div>
</template>

<script>
import HeaderTop from '../../components/HeaderTop/HeaderTop.vue'

export default {
  name: 'Profile',
  components: {
    HeaderTop
  }
}
</script>

子传父（公共组件传给某页面）：

子组件：

<template>
<view class="input">
	<input class="search-input" style="border: none;" @input="input" />
</view>
</template>
<script>
import HeaderTop from '../../components/HeaderTop/HeaderTop.vue'

export default {
	methods:{
		input(e) {
				let value = e.detail.value;
				this.$emit('get-input-value', value);
			}
}
}
</script>

父组件：

<template>
    <div class="profile">
        <qjFuzzySearch class="input" @get-input-value="getInputValue" v-model="queryData.giftName" @confirm-value="confirmValue">
				</qjFuzzySearch>
    </div>
</template>

<script>
import qjFuzzySearch from '@/components/qj-fuzzy-search/qj-fuzzy-search.vue'

export default {
  components: {
    qjFuzzySearch
  },
  methods:{
  	getInputValue(e) {
		this.queryData.giftName = e;
		debounce(this.getList, 500); //防抖 如果在项目中使用了uview-ui 则直接调用uview封装的防抖方法即可
			}, // 通过子组件输入的值,发送请求,进行查询,获取列表
  }
}
</script>

插槽slot

子组件：

<!--首页头部-->
<template>
  <header class="header">
  <!--3.插槽1，name:left-->
    <slot name="left"></slot>
    <span class="header_title">
    <!--1.接收父组件传值，名为title-->
      <span class="header_title_text ellipsis">{{title}}</span>
    </span>
    <!--4.插槽2，name:right-->
    <slot name="right"></slot>
  </header>
</template>

<script>
  export default {
  //2.接收父组件传的值为title,类型为String
    props:{
      title:String
    }
  }
</script>

父组件：

<!--首页头部-->
		<!--0.用title向子组件传值-->
        <TopHeader title='首页-昌平区北七家宏福科技园(337省道北)'>
        <!--1.使用插槽：左-->
	        <span class="header_search" slot='left'>
	            <i class="iconfont icon-sousuo"></i>
	        </span>
	     <!--2.使用插槽：右-->
	        <span class="header_login" slot='right'>
            	<span class="header_login_text">登录|注册</span>
          	</span>
        </TopHeader>

更多欢迎补充......

参考：
https://www.cnblogs.com/chenxi188/p/13940371.html?ivk_sa=1024320u
https://blog.csdn.net/weixin_42614080/article/details/104041392