vue父子组件之间的传值——已导航栏为例

父子组件之间的数据传递

使用的组件库是vant的
需求：需要一个自定义的头部导航栏，左侧、右侧、中间的内容包括各自的事件都通过自定义来实现
例如：
导航栏一

导航栏二

导航栏三

代码实现：
子组件

<template>
  <van-nav-bar
    :left-arrow="propsHead.isLeft"
    @click-left="onClickLeft"
    @click-right="onClickRight"
  >
  <span slot="title">{{propsHead.title}}</span>
  <span slot="right">{{propsHead.rightContent}}</span>
  </van-nav-bar>
</template>
<script>
import "./styles/f_footNav.less";
export default {
  name: "PubHead",
  props: {
      propsHead:{
          type:Object
      }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    onClickRight() {
        this.$emit("fn_clickRight",1)
    }
  }
};
</script>

父组件

<template>
  <div class="goodsHeadBox">
    <PubHead :propsHead="propsHead" @fn_clickRight="fn_clickRight"/>
  </div>
</template>
<script>
import "./styles/goods_details.less";
import PubHead from "../components/pubHead.vue";
export default {
  components: {
    PubHead
  },
  data(){
      return{
          propsHead:{
              isLeft:true,
              title:'详情',
              rightContent:'右侧'
          }
      }
  },
  methods:{
      fn_clickRight:function(num){
         console.log(num)
      }
  }
};
</script>

展示效果图上“导航栏一”
解释：
1.子组件从父组件接收了一个对象：propsHead，在父组件中定义好该对象之后，绑定在组件上，在子组件中props中接收即可
2.子组件调用父组件中的事件。导航栏右侧从父组件接收了一个事件fn_clickRight，通过this.$emit（）定义事件名称，之后在父组件中声明、绑定即可。如果需要参数，也是可以附带过去的。

PS.如果导航栏右侧会用到图标，可以在父子组件中做如下调整
子组件：在对应的位置做如下调整

  + <img slot="right" v-if="propsHead.rightImg" :src="propsHead.rightContent" alt="">
  + <span slot="right" v-if="!propsHead.rightImg">{{propsHead.rightContent}}</span>
  - <span slot="right">{{propsHead.rightContent}}</span>

父组件：在对应的位置做如下调整

如上调整之后即得上图“导航三”

当然如果你愿意，可以有更多的类型的导航栏。不过也根据个人情况，比较复杂的又不常使用的可以单独在页面写。

期间曾碰到一个小问题，顺便提一下
导航栏右侧内容有两种：文字、图片，原来我是打算做如下判断的

<span slot="right">{{propsHead.rightImg?propsHead.rightContent:<img :src="propsHead.rightContent"/>}}</span>

JSX语法可以这么使用，但是mustache的双大括号语法不行，涉及算元运算符的，字符串或者变量可以，标签不能这么用，所以转换为vue中v-if就可以了。