Vue.component的属性说明

Vue.component的属性

Vue.component(‘组件名称’，{})中的属性

1.template

作用：用来定义组件的html模板

使用：直接接字符串

Vue.component('组件名称'，
{
template:'<p>aaa</p>'
})

2.data

作用：

定义一个在组件中使用的数据

定义：

Vue.component('组件名称'，
{
    data:fuction(){
        return(
            msg:'aa'
            //每个组件使用的数据都是独立的
            //每个数据都是新创建的
            //就算用的是同一个组件模板
            //var a=0
            //而直接return a
            //则会多个页面上的组件同时使用同一个数据源
        )
    }
})

使用：

使用插值表达式{undefined{msg}}

3.methods

作用：

定义一个在组件中使用的方法

定义：

Vue.component('组件名称'，
{
    methods:{
        方法名(){}
    }
})

4.props

作用：

将父组件的数据传递到子组件

定义：

Vue.component('组件名称'，
{
props:['对接父组件数据的名称'],
})

与data中的区别：

props是从父组件传递过来的，只能读取，不能修改父组件中的值

data是子组件私有的，可读可写

Vue的component标签

作用

可以在一个组件上进行多样化渲染。例如：选项卡

is属性

    <div id="father">
        <component is="one"></component>
        <component is="two"></component>
    </div>
    <script>
        Vue.component('one', {
            template: `
            <div>我是第一个组件</div>
            `
        })
        Vue.component('two', {
            template: `
            <div>我是第二个组件</div>
            `
        })
        let vm = new Vue({
            el: "#father"
        })
    </script>

可以看到通过coponent的is属性可以绑定不同的组件，渲染不同的模板。

那么我们是不是可以通过这个属性来完成一个属性多种模板的效果呢

   <div id="app">
             <button @click="onclick('hc-c')">显示第一个</button>
             <button @click="onclick('hc-b')">显示第二个</button>

            <component :is="name"></component>
    </div>
    <script>
        Vue.component('hc-c', {
            template: `
                <div>我是第一个</div>
            `
        })
        Vue.component('hc-b', {
            template: `
                <div>我是第二个</div>
            `
        })
        let vm = new Vue({
            el: "#app",
            data:{
                name:''
            },
            methods:{
                onclick(item){
                    this.name = item;
                }
            }
        })
    </script>

可以看到，通过这个is属性，我们可以达到选项卡的效果

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue 动态组件component

    vue 动态组件component

    目录 1.component 2.keep-alive 2.1存在的问题 2.2使用keep-alive解决 2.3keep-alive的生命周期 2.4keep-alive 的 include, exclude属性 1.component 如何实现动态组件渲染 vue提供了一个内置的<component> ,专门用来实现动态组件的渲染. 这个标签就相当于一个占位符,需要使用is属性指定绑定的组件 <button @click="comName = 'Left'"&g

  • vue component组件使用方法详解

    什么是组件 按照惯例,引用Vue官网的一句话: 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件component的注册 全局组件: Vue.component('todo-item',{ props:['grocery'], template:'<li>{{grocery.te

  • 详解Vue与VueComponent的关系

    详解Vue与VueComponent的关系

    下面这个案例 复习我们之前学过的原型链的知识点 // 定义一个构造函数 function Demo() { this.a = 1 this.b = 2 } //创建一个Demo实例对象 const d = new Demo() console.log(Demo.prototype); //显示原型属性 console.log(d.__proto__); //隐式原型属性 console.log(Demo.prototype === d.__proto__); //true //程序员通过显示原型

  • vue中component组件的props使用详解

    vue中component组件的props使用详解

    本文介绍了 vue中component组件的props使用详解,分享给大家,具体如下: props使用方法 Vue.component('my-component',{ props:['message'], template:'<div class="tem1">{{message}}</div>' }); <my-component message="hello"></my-component> 注意:props 的

  • vue内置组件component--通过is属性动态渲染组件操作

    我就废话不多说了,大家看代码吧~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://cdn.bootcss.com

  • 浅析vue component 组件使用

    component 使用 component的注册 1.全局注册 使用用Vue.component('componentName',{template:'<div class="tem1">hello world</div>'})在初始化实例之前. componentName自定义名称 在实例声明的作用域下中使用<componentName></componentName> 成功渲染效果就是 '<div class="te

  • Vue.component的属性说明

    Vue.component的属性说明

    Vue.component的属性 Vue.component(‘组件名称’,{})中的属性 1.template 作用:用来定义组件的html模板 使用:直接接字符串 Vue.component('组件名称', { template:'<p>aaa</p>' }) 2.data 作用: 定义一个在组件中使用的数据 定义: Vue.component('组件名称', {     data:fuction(){         return(             msg:'aa'

  • 简单理解vue中Props属性

    本文实例为大家解析了vue中Props的属性,供大家参考,具体内容如下 使用 Props 传递数据 组件实例的作用域是孤立的.这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.可以使用 props 把数据传给子组件. "prop" 是组件数据的一个字段,期望从父组件传下来.子组件需要显式地用 props 选项 声明 props: Vue.component('child', { // 声明 props props: ['msg'], // prop 可以用在模板内 // 可以

  • vue组件watch属性实例讲解

    本文实例为大家分享了vue组件watch属性的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>wacth属性</title> <script src="js/vue.js"></script> </head> <body> <div i

  • 关于vue.extend和vue.component的区别浅析

    关于vue.extend和vue.component的区别浅析

    前言 最近一个朋友问我vue.extend和vue.component两者之间有什么区别?突然这么一问竟答不出来,回来想想有必要总结下,所以本文就来给大家介绍关于vue.extend和vue.component的区别,下面话不多说了,来一起看看详细的介绍吧. Vue.extend 返回的是一个"扩展实例构造器",也就是一个预设了部分选项的 Vue 实例构造器 var myVue = Vue.extend({ // 预设选项 }) // 返回一个"扩展实例构造器" /

  • Vue 使用Props属性实现父子组件的动态传值详解

    如下所示: <!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue&quo

  • vue.extend与vue.component的区别和联系

    如果大家只顾开发,对基础知识不了解,在今后的解决问题过程中,也是个大问题,今天小编抽空对基础概念给大家屡一下,用于大家日后学习. Vue.extend({})简述:使用vue.extend返回一个子类构造函数,也就是预设部分选项的vue实例构造器. 后可使用vue.component进行实例化.或使用new extendName().$mount(''+el)方式进行实例化(从而实现模拟组件). Vue.component({})简述:不多介绍了...用于生成全局组件 使用: 1,Vue.com

  • 详解如何理解vue的key属性

    如果没有这个属性的时候vue应用 in-place patch(就地复用)策略.列表里的顺序发生改变的时候比如shuffle(列表打乱)的时候,vue为了提升性能,不会移动dom元素,只是更新相应元素的内容节点. 就地复用的弊端 这个默认的模式是高效的,但是只适用于不依赖子组件状态或临时 DOM 状态 (例如:表单输入值) 的列表渲染输出. 如上引用自官网,这个模式就是上面的"就地复用"策略.那么是不是依赖子组件状态的列表渲染采用上面的模式就出问题了呢.如下测试代码: <ul&g

  • Vue路由对象属性 .meta $route.matched详解

    $route.fullPath 1 路由是:/path/:type真正路径是:/path/list 2 path匹配路径: /path/list 3 fullPath匹配路由: /path/:type 路由元信息 .meta const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, children: [ { path: 'bar', component: Bar, // a meta field meta:

  • vue动态绑定v-model属性名方式

    目录 vue动态绑定v-model属性名 1.目标 2.方案 vue双向绑定原理(v-model) 表单绑定 组件使用v-model vue动态绑定v-model属性名 1.目标 首先配置列,根据配置渲染表单,每个表单项绑定配置中的属性 2.方案 <template v-for="(item) in showQueryColumns" > <el-col :key="item.prop" :xs = "24" :sm = &qu

随机推荐