vue组件通讯的传递方式（一）

父传子：

父组件App.vue中定义一个自定义属性title，然后在子组件中用props进行接收，最后用{{ title }}渲染页面

父组件App.vue代码：

<template>

  <div id="app">

    <big :title="msg"></big>

    <smal></smal>

  </div>

</template>

<script>

import Big from './components/Big'

import Smal from './components/Small'

export default {

  name: 'App',

  data() {

    return {

      msg:'吴刚'

    }

  },

  components:{

    Big,

    Smal

  },

}

</script>

<style>

#app {

  font-family: 'Avenir', Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

}

</style>

子组件Big.vue代码:

<template>

    <div>

        big{{ title }}

        <button>传值</button>

    </div>

</template>

<script>

export default {

    data() {

        return {

            msg:'吴与卿'

        };

    },

    props:{

        title:{

            type:String, //检测类型

            default :"岳秀清" //默认值

        }

    },

    created() {

    },

    mounted() {

    },

};

</script>

<style scoped>

</style>