精华内容
下载资源
问答
  • Vue组件选项props

    千次阅读 2020-12-24 12:51:45
    前面的话组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个...本文将详细介绍Vue组件选项props父子级组件在介绍props之前,先介绍父子级组件的写法在一个良好定义的接口中尽可能将父子组件解耦...

    前面的话

    组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项。在 Vue 中,父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。本文将详细介绍Vue组件选项props

    父子级组件

    在介绍props之前,先介绍父子级组件的写法

    在一个良好定义的接口中尽可能将父子组件解耦是很重要的。这保证了每个组件可以在相对隔离的环境中书写和理解,也大幅提高了组件的可维护性和可重用性

    【错误写法】

    现在来介绍两种父子级组件的错误写法

    下面这种形式的写法是错误的,因为当子组件注册到父组件时,Vue.js会编译好父组件的模板,模板的内容已经决定了父组件将要渲染的HTML

    ...运行时,它的一些子标签只会被当作普通的HTML来执行,不是标准的HTML标签,会被浏览器直接忽视掉

    在父组件标签之外使用子组件也是错误的

    【正确写法】

    var childNode = {

    template: '

    childNode
    ',

    }

    var parentNode = {

    template: `

    `,

    components: {

    'child': childNode

    }

    };

    // 创建根实例

    new Vue({

    el: '#example',

    components: {

    'parent': parentNode

    }

    })

    静态props

    组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据,需要通过子组件的 props 选项

    使用Prop传递数据包括静态和动态两种形式,下面先介绍静态props

    子组件要显式地用 props 选项声明它期待获得的数据

    var childNode = {

    template: '

    {{message}}
    ',

    props:['message']

    }

    静态Prop通过为子组件在父组件中的占位符添加特性的方式来达到传值的目的

    var childNode = {

    template: '

    {{message}}
    ',

    props:['message']

    }

    var parentNode = {

    template: `

    components: {

    'child': childNode

    }

    };

    // 创建根实例

    new Vue({

    el: '#example',

    components: {

    'parent': parentNode

    }

    })

    命名约定

    对于props声明的属性来说,在父级HTML模板中,属性名需要使用中划线写法

    var parentNode = {

    template: `

    components: {

    'child': childNode

    }

    };

    子级props属性声明时,使用小驼峰或者中划线写法都可以;而子级模板使用从父级传来的变量时,需要使用对应的小驼峰写法

    var childNode = {

    template: '

    {{myMessage}}
    ',

    props:['myMessage']

    }

    var childNode = {

    template: '

    {{myMessage}}
    ',

    props:['my-message']

    }

    动态props

    在模板中,要动态地绑定父组件的数据到子模板的 props,与绑定到任何普通的HTML特性相类似,就是用 v-bind。每当父组件的数据变化时,该变化也会传导给子组件

    var childNode = {

    template: '

    {{myMessage}}
    ',

    props:['myMessage']

    }

    var parentNode = {

    template: `

    components: {

    'child': childNode

    },

    data(){

    return {

    'data1':'aaa',

    'data2':'bbb'

    }

    }

    };

    传递数字

    初学者常犯的一个错误是使用字面量语法传递数值

    var childNode = {

    template: '

    {{myMessage}}的类型是{{type}}
    ',

    props:['myMessage'],

    computed:{

    type(){

    return typeof this.myMessage

    }

    }

    }

    var parentNode = {

    template: `

    components: {

    'myChild': childNode

    }

    };

    // 创建根实例

    new Vue({

    el: '#example',

    components: {

    'MyParent': parentNode

    }

    })

    因为它是一个字面 prop,它的值是字符串 "1" 而不是 number。如果想传递一个实际的 number,需要使用 v-bind,从而让它的值被当作JS表达式计算

    var parentNode = {

    template: `

    components: {

    'myChild': childNode

    }

    };

    或者可以使用动态props,在data属性中设置对应的数字1

    var parentNode = {

    template: `

    components: {

    'myChild': childNode

    },

    data(){

    return {

    'data': 1

    }

    }

    };

    props验证

    可以为组件的 props 指定验证规格。如果传入的数据不符合规格,Vue会发出警告。当组件给其他人使用时,这很有用

    要指定验证规格,需要用对象的形式,而不能用字符串数组

    Vue.component('example', {

    props: {

    // 基础类型检测 (`null` 意思是任何类型都可以)

    propA: Number,

    // 多种类型

    propB: [String, Number],

    // 必传且是字符串

    propC: {

    type: String,

    required: true

    },

    // 数字,有默认值

    propD: {

    type: Number,

    default: 100

    },

    // 数组/对象的默认值应当由一个工厂函数返回

    propE: {

    type: Object,

    default: function () {

    return { message: 'hello' }

    }

    },

    // 自定义验证函数

    propF: {

    validator: function (value) {

    return value > 10

    }

    }

    }

    })

    type 可以是下面原生构造器

    String

    Number

    Boolean

    Function

    Object

    Array

    Symbol

    type 也可以是一个自定义构造器函数,使用 instanceof 检测。

    当 prop 验证失败,Vue 会在抛出警告 (如果使用的是开发版本)。props会在组件实例创建之前进行校验,所以在 default 或 validator 函数里,诸如 data、computed 或 methods 等实例属性还无法使用

    下面是一个简单例子,如果传入子组件的message不是数字,则抛出警告

    var childNode = {

    template: '

    {{message}}
    ',

    props:{

    'message':Number

    }

    }

    var parentNode = {

    template: `

    components: {

    'child': childNode

    },

    data(){

    return{

    msg: '123'

    }

    }

    };

    // 创建根实例

    new Vue({

    el: '#example',

    components: {

    'parent': parentNode

    }

    })

    传入数字123时,则无警告提示。传入字符串'123'时,结果如下所示

    将上面代码中,子组件的内容修改如下,可自定义验证函数,当函数返回为false时,则输出警告提示

    var childNode = {

    template: '

    {{message}}
    ',

    props:{

    'message':{

    validator: function (value) {

    return value > 10

    }

    }

    }

    }

    在父组件中传入msg值为1,由于小于10,则输出警告提示

    var parentNode = {

    template: `

    components: {

    'child': childNode

    },

    data(){

    return{

    msg:1

    }

    }

    };

    单向数据流

    prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解

    另外,每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着不应该在子组件内部改变 prop。如果这么做了,Vue 会在控制台给出警告

    下面是一个典型例子

    var childNode = {

    template: `

    子组件数据

    {{childMsg}}

    `,

    props:['childMsg']

    }

    var parentNode = {

    template: `

    父组件数据

    {{msg}}

    `,

    components: {

    'child': childNode

    },

    data(){

    return {

    'msg':'match'

    }

    }

    };

    // 创建根实例

    new Vue({

    el: '#example',

    components: {

    'parent': parentNode

    }

    })

    父组件数据变化时,子组件数据会相应变化;而子组件数据变化时,父组件数据不变,并在控制台显示警告

    修改子组件数据时,打开浏览器控制台会出现下图所示警告提示

    修改prop数据

    修改prop中的数据,通常有以下两种原因

    1、prop 作为初始值传入后,子组件想把它当作局部数据来用

    2、prop 作为初始值传入,由子组件处理成其它数据输出

    [注意]JS中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态

    对于这两种情况,正确的应对方式是

    1、定义一个局部变量,并用 prop 的值初始化它

    props: ['initialCounter'],

    data: function () {

    return { counter: this.initialCounter }

    }

    但是,定义的局部变量counter只能接受initialCounter的初始值,当父组件要传递的值发生变化时,counter无法接收到最新值

    var childNode = {

    template: `

    子组件数据

    {{temp}}

    `,

    props:['childMsg'],

    data(){

    return{

    temp:this.childMsg

    }

    },

    };

    var parentNode = {

    template: `

    父组件数据

    {{msg}}

    `,

    components: {

    'child': childNode

    },

    data(){

    return {

    'msg':'match'

    }

    }

    };

    // 创建根实例

    new Vue({

    el: '#example',

    components: {

    'parent': parentNode

    }

    })

    下面示例中,除初始值外,父组件的值无法更新到子组件中

    2、定义一个计算属性,处理 prop 的值并返回

    props: ['size'],

    computed: {

    normalizedSize: function () {

    return this.size.trim().toLowerCase()

    }

    }

    但是,由于是计算属性,则只能显示值,而不能设置值

    var childNode = {

    template: `

    子组件数据

    {{temp}}

    `,

    props:['childMsg'],

    computed:{

    temp(){

    return this.childMsg

    }

    },

    };

    var parentNode = {

    template: `

    父组件数据

    {{msg}}

    `,

    components: {

    'child': childNode

    },

    data(){

    return {

    'msg':'match'

    }

    }

    };

    // 创建根实例

    new Vue({

    el: '#example',

    components: {

    'parent': parentNode

    }

    })

    下面示例中,由于子组件使用的是计算属性,所以,子组件的数据无法手动修改

    3、更加妥帖的方案是,使用变量储存prop的初始值,并使用watch来观察prop的值的变化。发生变化时,更新变量的值

    var childNode = {

    template: `

    子组件数据

    {{temp}}

    `,

    props:['childMsg'],

    data(){

    return{

    temp:this.childMsg

    }

    },

    watch:{

    childMsg(){

    this.temp = this.childMsg

    }

    }

    };

    var parentNode = {

    template: `

    父组件数据

    {{msg}}

    `,

    components: {

    'child': childNode

    },

    data(){

    return {

    'msg':'match'

    }

    }

    };

    // 创建根实例

    new Vue({

    el: '#example',

    components: {

    'parent': parentNode

    }

    })

    展开全文
  • vue组件之属性Props

    2020-12-24 12:52:41
    组件的属性和事件父子组件之间的通信父子组件之间的通信就是 props down,events up,父组件通过 属性props向下传递数据给子组件,子组件通过 事件events 给父组件发送消息。比如,子组件需要某个数据,就在内部定义...

    组件的属性和事件

    父子组件之间的通信

    父子组件之间的通信就是 props down,events up,父组件通过 属性props向下传递数据给子组件,子组件通过 事件events 给父组件发送消息。

    比如,子组件需要某个数据,就在内部定义一个prop属性,然后父组件就像给html元素指定特性值一样,把自己的data属性传递给子组件的这个属性。

    而当子组件内部发生了什么事情的时候,就通过自定义事件来把这个事情涉及到的数据暴露出来,供父组件处理。

    如上代码,

    foo是组件内部定义的一个prop属性,baz是父组件的一个data属性,

    event-a是子组件定义的一个事件,doThis是父组件的一个方法

    过程就是这样:

    父组件把baz数据通过prop传递给子组件的foo;

    子组件内部得到foo的值,就可以进行相应的操作;

    当子组件内部发生了一些变化,希望父组件能知道时,就利用代码触发event-a事件,把一些数据发送出去

    父组件把这个事件处理器绑定为doThis方法,子组件发送的数据,就作为doThis方法的参数被传进来

    然后父组件就可以根据这些数据,进行相应的操作

    属性Props

    Vue组件通过props属性来声明一个自己的属性,然后父组件就可以往里面传递数据。

    Vue.component('mycomponent',{

    template: '

    这是一个自定义组件,父组件传给我的内容是:{{myMessage}}
    ',

    props: ['myMessage'],

    data () {

    return {

    message: 'hello world'

    }

    }

    })

    然后调用该组件

    注意,由于HTML特性是不区分大小写的,所以传递属性值时,myMessage应该转换成 kebab-case (短横线隔开式)my-message="hello"。

    v-bind绑定属性值

    v-bind绑定属性值的一个特性:一般情况下,使用v-bind给元素特性(attribute)传递值时,Vue会将""中的内容当做一个表达式。

    //比如

    hello

    上面这样,div元素的attr特性值就是message。

    hello

    这里的message应该是Vue实例的data的一个属性,这样div元素的attr特性值就是message这个属性的值。

    之所以说是一般情况,是因为class和style特性并不是这样。用v-bind:class和class传入正常的类名,效果是一样的,因为对于这两个特性,Vue采用了合并而不是替换的原则。

    动态绑定特性值

    根据上面,想要把父组件的属性绑定到子组件,应该使用v-bind,这样,父组件中数据改变时能反映到子组件。

    注意,根据父组件传递给子组件的属性类型的不同,当在子组件中更改这个属性时,会有以下两种情况:

    当父组件传递的属性是引用类型时,在子组件中更改相应的属性会导致父组件相应属性的更改。

    这是父组件的parentArray:{{parentArray}}

    Vue.component('my-component', {

    template: `

    这是接收了父组件传递值的子组件的childArray: {{childArray}}

    点击我改变父元素的parentArray

    `,

    props: ['childArray'],

    data () {

    return {

    counter: 1

    }

    },

    methods: {

    changeArray () {

    this.childArray.push(this.counter++)

    }

    }

    })

    new Vue({

    el: '#app',

    data: {

    parentArray: []

    }

    })

    点击结果

    当父组件传递值为基本类型时,在子组件中更改这个属性会报错。正确的做法是,在父组件中绑定属性值时,加上.sync修饰符。

    这是父组件的parentArray:{{parent}}

    Vue.component('myComponentSync', {

    template: `

    这是接收了父组件传递值的子组件的child: {{child}}

    点击我改变父元素的parent

    `,

    props: ['child'],

    data() {

    return {

    counter: this.child

    }

    },

    methods: {

    change() {

    this.counter++

    this.$emit('update:child', this.counter)

    }

    }

    })

    new Vue({

    el: '#app2',

    data: {

    parent: 0

    }

    })

    点击结果如下图,去掉无法改变

    子组件希望对传入的prop进行操作

    一般来说,是不建议在子组件中对父组件中传递来的属性进行操作的。如果真的有这种需求,可以这样:

    父组件传递了一个基本类型值,那么可以在子组件中创建一个新的属性,并以传递进来的值进行初始化,之后就可以操作这个新的属性了

    props: ['initialCounter'],

    data: function () {

    return { counter: this.initialCounter }

    }

    父组件传递了一个引用类型值,为了避免更改父组件中相应的数据,最好是对引用类型进行复制。复杂的情况,肯定应该是深复制。

    给子组件传递正确类型的值

    同样是上面的原因,静态的给子组件的特性传递值,它都会把他当做一个字符串。

    子组件中,特性的值是字符串 "1" 而不是 number 1。如果想传递正确的数值,应该使用v-bind传递,这样就能把传递的值当做一个表达式来处理,而不是字符串。

    Prop验证

    我们可以给组件的props属性添加验证,当传入的数据不符合要求时,Vue会发出警告。

    Vue.component('myComponent', {

    props: {

    // 基础类型检测 (`null` 意思是任何类型都可以)

    propA: Number,

    // 多种类型

    propB: [String, Number],

    // 必传且是字符串

    propC: {

    type: String,

    required: true

    },

    // 数字,有默认值

    propD: {

    type: Number,

    default: 100

    },

    // 数组/对象的默认值应当由一个工厂函数返回

    propE: {

    type: Object,

    default: function () {

    return { message: 'hello' }

    }

    },

    // 自定义验证函数

    propF: {

    validator: function (value) {

    return value > 10

    }

    }

    }

    })

    type 可以是下面原生构造器:

    String

    Number

    Boolean

    Function

    Object

    Array

    Symbol

    type 也可以是一个自定义构造器函数,使用 instanceof 检测。

    // 自定义Person构造器

    function Person(name, age) {

    this.name = name

    this.age = age

    }

    Vue.component('my-component', {

    template: `

    名字: {{ person-prop.name }}, 年龄: {{ person-prop.age }}
    `,

    props: {

    person-prop: {

    type: Person // 指定类型

    }

    }

    })

    new Vue({

    el: '#app2',

    data: {

    person: 2 // 传入Number类型会报错

    }

    })

    非Prop类型的属性

    也可以像在html标签中添加data-开头的自定义属性一样,给自定义组件添加任意的属性。而不仅限于data-*形式,这样做的话,Vue会把这个属性放在自定义组件的根元素上。一个自定义组件的模板只能有一个根元素。

    覆盖非Prop属性

    如果父组件向子组件的非prop属性传递了值,那么这个值会覆盖子组件模板中的特性。

    Vue.component('my-component2', {

    template: `

    子组件原有的特性被覆盖了
    `

    })

    new Vue({

    el: '#app3'

    })

    上面渲染的结果是,div的att属性是helloParent。

    注意:前面已经提到过,覆盖原则对于class和style不适用,而是采用了合并(merge)的原则。

    Vue.component('my-component2', {

    template: `

    子组件原有的特性被覆盖了
    `

    })

    new Vue({

    el: '#app3'

    })

    上面的渲染结果是,div的类名是class1 class2,行内样式是color:red; background:yellow;。

    展开全文
  • 根目录 + Vetur/ vetur/attributes.json { "MyCom" : }

    根目录 + Vetur/
    vetur/attributes.json

    {
      "MyCom" : 
    }
    
    
    
    展开全文
  • 最近在开发前端项目时候要封装一个组件方便多次用,传入值是数组。 vue官方文档这么写的: // 带有默认值的对象 propE: { type: Object, // 对象或数组默认值必须从一个工厂函数获取 default: function () { return...

    最近在开发前端项目时候要封装一个组件方便多次用,传入值是数组。
    vue官方文档这么写的:

    // 带有默认值的对象
    propE: {
    type: Object,
    // 对象或数组默认值必须从一个工厂函数获取
    default: function () {
    return { message: ‘hello’ }
    }
    },

    但是我在使用这个方法之后没有报错,也没有取到我在return里的值,查了一下还有其他方法。
    最终用default: () =>[] 解决了问题,原因并没有找到
    在这里插入图片描述

    展开全文
  • 先说问题,父组件利用props向子组件传值,浏览器 console 有这个值,但是获取不到内部的属性,困了我3个小时,真的**personalconsole以下为原代码1、home.vue(父组件)--personal是被传的参数:personal="personal">...
  • vue3.0 props组件传参

    2021-10-15 15:03:45
    正如在一个标准组件中所期望的那样,setup 函数中的 props 是响应式的,当传入新的 prop 时,它将被更新。 context 是一个普通的 JavaScript 对象,也就是说,它不是响应式的,这意味着你可以安全地对 context 使用 ...
  • vue组件props数组对象传参的默认值

    千次阅读 2021-04-15 09:52:21
    组件中接受props参数时,如果接受的是数组或对象类型,则default值应该用一个方法return返回 否则报错: Invalid default value for prop “slides”: Props with type Object/Array must use a factory function ...
  • props: { content: { type: Array, // default: function () { return [] } default: () => [] }, } 父组件给子组件的传值: 父组件 里面的返回空,意思就是template里面的div循环每个盒子返回为空盒子, ...
  • vue组件props属性

    2021-02-04 23:58:55
    VUE组件props属性 vue组件可以通过props属性来从父组件获取值 props属性可以有以下几种写法// 数组写法 props: ['title', 'content', 'like'] // 对象写法 - 1 props: { title: String, // 指定title的类型,...
  • props特性:在dom 不显示属性msg(自定义) 非props特性:在dom中会显示属性 父组件home <template> <div> <h1>home组件</h1> <!-- 没有加v-bind 传的值永远是字符串 --> <...
  • 这些方法主要是在这次做项目的过程中发现总结的来的,感觉也挺常用的,所以就简单的...我就直接从代码上面来进行js代码://子组件中,定义传入的变量的类型等props: {data: {type: Array,require:true},status: {...
  • 如前所述,vue组件中,props是组件公有属性,对外;data是组件的私有数据,对内。正因为props对外,由外部赋值,因此在组件内部,是只读的,即组件内部不适宜去改变这些元素的值。当然,改也可以改,但运行时刻会有...
  • 组件可以使用props组件...下面是个简单的例子:```//向子组件传值Vue.component('blog-post', {props: ['test', "content"],template: '{{ test }}:{{content}}'})var vm = new Vue({el: '#components-demo'});`...
  • 使用vue、uni-app开发小程序时,新闻列表做成了一个组件组件中根据props传入的type值调用请求,查询展示对应类型的新闻列表,但总是获取不到。 分析: 经过排查,发现由于page中的type是通过ajax异步获取到的,...
  • 这些方法主要是在这次做项目的过程中发现总结的来的,感觉也挺常用的,...子组件获取不到值时需要深拷贝我就直接从代码上面来进行js代码://子组件中,定义传入的变量的类型等props: {data: {type: Array,require: ...
  • vue组件props传值,对象获取不到的问题 问题描述: 父组件利用props向子组件传值,浏览器console有这个值,但是获取不到对象里的属性,console对象的属性值,打印出来值为undefined。 父组件定义了testobj这个对象。...
  • vue组件中,props是公有属性,主要对外,相当于类里面的get、set方法操作的属性;data是私有数据,主要供组件内部访问。 vue作为一种前端开发框架,组件是其中的主角吧。其实任何一种前端框架,除了vue,还有react,...
  • 在同一个编辑页面使用了同一个Vue组件,导致props 传值无效 问题描述: 在做一个文章编辑的页面,需要通过切换文章类型 ( 音频 / 视频) 显示隐藏上传不同类型的按钮给用户上传 , 例如以下代码会出现一个奇怪的问题, ...
  • Vue3 props组件抽离

    2021-11-07 11:04:52
    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么? 二、使用步骤 1.... 2....例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了...
  • vue组件中使用props传递数据的实例详解2019-01-07编程之家收集整理的这篇文章主要介绍了vue组件中使用props传递数据的实例详解,编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。在 Vue 中,父子组件...
  • 不更新原因:从 props 的 info 传递给 data 的 list ,只有一次操作,就是在 mounted 中,往后即使 props 的 info 发生了变化,data 也接收不到...(推荐):computed 重新计算属性 赋值到子组件 watch 监听props 变化 ...
  • Vue组件 一、组件作用 作用:用来减少Vue实例对象中代码量,日后在使用Vue开发过程中,可以根据不同业务将页面划分多个不同的组件,然后由多个组件去完成去完成整个页面的布局,便于使用Vue进行开发页面管理,方便...
  • 此时新闻列表组件为父组件,新闻内容组件为子组件,如果想从父组件向子组件传值(通讯),可以借助props来实现。 2. 开发新闻列表父组件 在src/componets目录下新建NewsList.vue,代码如下。 <template> <...
  • vue组件监听props值变化

    千次阅读 2021-03-12 16:34:37
    vue组件监听props值变化 一定要深度监听,不然监听不到 想过在data里面定义一个变量来盛props的变量,然后常规监听data的变量,发现不可 监听一个对象 props:{ option:Object }, watch: { option: { deep: ...
  • Vue3 与 Vue2 的Props、全局组件的异同点!

    千次阅读 热门讨论 2021-05-07 08:17:53
    作者:Matt Maribojoc 译者:前端小智 来源:stackabuse 有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。... Vue3 中,在组件中访问Props的方式与 Vue2 会有所不同。 为.
  • 最近在实现一个功能的时候发现,在一个vue页面中组件的部分一直不能展示,看了看代码,展示条件也符合啊,为何展示不出来呢?在仔细看了下逻辑,发现组件只有在接收props中的值发生改变的时候,才会执行下面的逻辑,...
  • vue3中子组件改变props

    千次阅读 2021-05-10 16:08:08
    周所周知vueprops是单向数据流,可以从父组件中改变传往子组件props,反之则不行,所以在vue2时,用.sync修饰符搭配配合$emit可以实现子组件改变props,如下 //父组件中 <Toast :show.sync="shows" ...
  • Vue3组件通信之props

    2021-07-27 11:41:58
    前言: 在开发工程中,我们经常会遇到组件之间相互进行通信,比如在一个...这儿记录一下Vue3 中组件之间通信之props。 父子组件之间的通信方式: 父组件传递给子组件: 通过 props 属性; 子组件传递给父组件:...
  • 组件的使用 设置私有组件组件使用子组件的方式。 在跟组件中使用 impor 导入之后定义的名字 ...首先在main.js中导入要设置的全局组件,在使用vue.component()方法。 import '导入之后的设置的组件名' from '设置

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 81,837
精华内容 32,734
关键字:

vue组件props作用

vue 订阅