【vue组件通讯①】父组件向子组件通讯props

组件实例的做用域是孤立的。这意味着不能 (也不该该) 在子组件的模板内直接引用父组件的数据。父组件的数据须要经过 prop才能下发到子组件中。

怎么作呢？

一、在子组件中，要显示地用props选项声明想要接收父组件的数据：

<template>
    <div class="mint-header is-fixed">
      <div class="mint-header-button is-left">
        <mt-button icon="back"  @click="pageGo"></mt-button>
      </div>
      <!--mytitle是接收父组件过来的数据-->
      <h1 class="mint-header-title">{{mytitle}}</h1>
      <div class="mint-header-button is-left"></div>
    </div>
</template>
<script>
  export default {
    //此写法是控制传过来的数据类型
    props:{
      mytitle:String
    },
    data() {
      return{
      }
    },
    methods: {
      pageGo:function () {
        this.$router.go(-1)
      }/*回退到前一页的函数*/
    },
  }
</script>

上述写法是控制传递参数的类型props还有另外一种写法，这种写法是直接声明参数，如果想要对参数加判断就使用上述写法

props:['mytitle'],

二、【静态props】在父组件中，如果单纯想要传一个静态字符串，直接以下声明便可：

<template>
    <div id="template">
        <!--mytitle是要传给子组件的静态字符串，
        这边my-topHeader是子组件，须要引入组件才可以使用-->
        <my-topHeader mytitle="我是父组件"></my-topHeader>
    </div>
</template>

三、【动态props】在父组件中，有不少时候咱们传递的是一个动态的参数，随着操做的变化而变化，则这时候父组件须要使用v-bind来绑定动态参数：

<template>
    <div id="template">
        <!--mytitle的item是要传给子组件的动态参数-->
        <my-topHeader :mytitle='item'></my-topHeader>
    </div>
</template>

item是一个动态参数，通常是如今data钩子里面定义，而后根据所需的操做进行动态改变数据