Vue組件之從外部獲取數據

即由父組件往子組件傳遞信息

1、父組件，需先引入子組件，然后注冊，調用子組件時直接通過設置屬性的方式傳值到子組件

<template>
  <div id="app">
    <alert type="success" title="這是一段成功提示的信息" />
  </div>
</template>

<script>
import alert from '@/components/alert'//1、引入子組件

export default {
  name: 'App',
  components: {//2、注冊
    alert
  }
}

2、子組件，通過props屬性設置向外的接口屬性

<template>
    <div role="alert" :class="['el-alert',changeAlert,'is-center','is-light']">
        <i :class="['el-alert__icon',changeIcon]"></i>
        <div class="el-alert__content">
            <slot name="title">
                <span class="el-alert__title">{{title}}</span>
            </slot>
        </div>
    </div>
</template>

<script>
export default {
    props:{
        type:{
            type:String,
            default:'info'
        },
        title:{
            type:String,
            default:'這是一段消息提示的文字'
        }
    },
    computed:{
        changeAlert:function(){
            return 'el-alert--'+this.type;//動態獲取class名
        }, 
        changeIcon:function(){ 
            return 'el-icon-'+this.type; 
        } 
    } 
} 
</script>