Vue组件之从外部获取数据

Posted tangzhi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>    

 

以上是关于Vue组件之从外部获取数据的主要内容,如果未能解决你的问题,请参考以下文章

spark之从外部文件获取广播变量

jquery之从ajax获取json数据以表格的形式显示在页面上

[死磕 Spring 17/43] --- IOC 之从单例缓存中获取单例 bean

死磕 Spring----- IOC 之从单例缓存中获取单例 bean

如何获取组件数据?如何从外部访问组件?

vue父组件获取子组件的属性或方法