Vue——component组件

使用组件,必须要有Vue实例,并且要把实例挂载在标签上,在vue实例中使用组件模板,会替换掉Vue绑定的元素

<script>
    new Vue({
        el:'#app'
    })
</script>

基础属性

1、props属性是用来存放参数,把Vue实例与模板的参数相关联起来,相当于Vue实例与template之间的桥梁,可以写成数组的方式,也可以写成对象的方式,如果是数组方式,仅仅用于传参,如果是JSON形式,可以设置参数的一些属性,props中的属性不可修改,为只读属性,如果需要在子组件中修改父组件传过来的参数,需要在data属性中返回该参数,子组件中直接修改该参数,当类型为Boolean类型的时候,只需在组件中添加键就可以设置该属性为true,不需要传值,组件中除了使用type进行类型验证,还可以自定义验证器validator,

Vue.component('Button',{ //Button为模板标签名
    inheritAttrs:false,   //不接受除了在props中定义的其它参数
    props:{
      color: {
          type: String || null || [String,Number],//color传入时的类型
          required: true, // color参数为必须参数
          default: '' // 当color参数未传递时 设置一个默认值
          validator(value){ // 这是一个自定义验证的函数 函数的参数就是你要验证的prop返回true表示验证成功,返回false表示验证失败 控制台会报错
             ...//判断条件
              return true
          }
      } 
    },
    data:{
      return {
        iColor:this.color
      }
    }
}

2、template属性用来保存模板,使用ES6中的 ` ` 操作符可以直接拼接poros中的参数,还可以换行书写模板

...,
template: `
    <i 
        class="glyphicon" 
        :style="{
            fontSize: size + 'px',
            color
        }" 
        :class="iconName">
    </i>
`,
...

3、computed属性可以用来动态计算参数,与Vue实例中的computed的用法一样

...,
computed: {
    iconName() {
        if (this.name) {
            return 'glyphicon-' + this.name
        }
    }
},
...

4、组件多参数同步

组件内部多个参数往父组件中传递时使用.sync接收,但是在组件内部需添加this.$emit('update:...')

//组件外部(父组件)
<Input :value1.sync='value1' :value2.sync='value2'></Input>
//组件内部
this.$emit("update:value2", val);

5、组件内部是不能直接修改传进来的参数,通过data(){},复制一个值,使用watch属性侦听参数是否发生变化(watch中的参数是方法,方法名必须是需要侦听的参数名),再使用this.$emit('事件名',参数)可以返回数据给父组件

watch: {
    input(val,oldVal) { //val是变化之后的值,oldVal是变化之前的值
    // 在Input组件内部 input变量发生的变化的时候
    this.$emit('input',val)
    }
},
data() {
    return {
       input: this.value
    }
}

6、动态组件,能够保存失效的标签的value

//定义局部组件
const Cpt1 = {
    template: `
        <div>组件1
            <input v-model="input" />
        </div>
    `,
    data() {
        return {
            input: ''
        }
    }
}
const Cpt2 = {
    template: `
        <div>组件2
            <input v-model="input" />    
        </div>
    `,
    data() {
        return {
            input: ''
        }
    }
}

const Cpt3 = {
    template: `
        <div>组件3
            <input v-model="input" />
        </div>
    `,
    data() {
        return {
            input: ''
        }
    }
}

//  <component :is="" />    动态组件
// :is 接收一个组件的名称
//  <keep-alive> 用来缓存已失效 组件
new Vue({
    el: '#app',
    template: `
        <div class="app">
            <keep-alive>
                <component :is="value" />  
            </keep-alive>
            <button @click="value = 'Cpt1'">Cpt1</button> 
            <button @click="value = 'Cpt2'">Cpt2</button> 
            <button @click="value = 'Cpt3'">Cpt3</button>  
        </div>
    `,
    data:{
        value: 'Cpt1',
        
    },
    components: {
        Cpt1,
        Cpt2,
        Cpt3
    }
})

 

注意:

1、使用Vue的组件生成的模板不能直接在标签内为其添加内容,如果想在双组件标签中放内容的话 必须在组件的模板中添加slot 插槽标签,插槽中有name属性,是给插槽定义一个名称,使用时可以指定插槽,slot-scope属性,把内部模板中的作用域中的数据传递过来

const Card = {
    template: `
        <div class='card'>
            <header>
                <slot name='header' :title='title'>{{title}}</slot>
            </header>
            <main>
                <slot name="main"></slot>
            </main>
        </div>
    `,
    data() {
        return {
            title: '标题'
        }
    }
}
new Vue({
    el: '#app',
    data: {
        iTitle: '标题栏'
    },
    components: {
        Card
    },
    //slot-scope属性,把内部模板中的作用域传递过来
    template: `
        <div>
            <Card>
                <div slot='header' slot-scope='data'>{{data}}</div>
                <div slot='main'>main</div>
            </Card>
        </div>
    `
})

2、如果组件与Vue实例写在同一个js或者html文件中,有关组件的代码必须写在Vue实例之前,因为编译器解析代码是从上往下逐行解析的,必须先存在组件,才能在Vue实例中进行操作,否则会报错

3、自定义的模板标签名不能与html中的标签名相同(自定义的模板可以使用大写开头,不会与html标签冲突),否则会报错

4、vue的组件的props属性支持驼峰命名,不支持连接线命名,html解析的时候会解析成字符串拼接,得到NAN(string-string),在props中必须使用驼峰命名,在html中使用连接线命名与之关联起来,因为html会把连接线命名转换成驼峰,值得一提的是,在props中使用大驼峰(UserName),在html中可以使用小驼峰(userName)以及连接线命名(user-name),如果props使用小驼峰,html中不能使用大驼峰

<div id="app">
    <my-component username='username' user-name='user-name'></my-component>
</div>
<script>
    Vue.component('my-component',{
        props:['username','userName'],
        template:`<p>用户名:{{username}},驼峰命名:{{userName}}</p>`
    })
    new Vue({
        el:'#app'
        // data
    })
</script>

 打印结果:

5、全局模板与局部模板之间的细小差异:添加的全局模板(直接添加到Vue上的模板都是全局模板:Vue.component() ),可以直接在其它模板中直接使用,添加在Vue实例中的模板为局部模板(new Vue ({}) ),使用时需要先通过components属性导出,局部模板与全局模板之间存在的意义是,解决命名冲突(可以借鉴JS中的局部作用域与全局作用域)

    var Button = {
        template: `
                <div>局部组件</div>
            `
    }
    new Vue({
        el: '#app',
        template: `
            <div>
                <button>组件</button>
                <Button />    
            </div>        
        `,
        components: {// components选项用于添加 局部组件
            Button   在这里注册的, 当前这个Button实例它只属于 Vue 实例
             // 'Button-one':Button 重命名模板
        }
    })

如果要在其它JS模板中使用上面的Button模板,需要在其它JS文件中添加components属性导入Button模板,Button必须写在JS文件之前,遵循html从上往下解析原则

6、使用组件的时候,是不能直接使用v-on事件处理的,需要先在组件内部先定义好事件,组件挂载元素上的事件都是需要在组件内部自定义的,在自定义内部使用this.$emit('事件名',事件参数),发出到组件外部进行调用。

7、在html 里面去写 组件的时候 必须使用双tag

8、template 选项中必须只能有一个根tag

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
组件Vue.js 中最重要的概念之一。组件可以让我们将 UI 拆分为独立、可复用的部件,使得代码更加清晰、易于维护。在 Vue.js 中,组件可以分为全局组件和局部组件,其中全局组件可在任何地方使用,而局部组件只能在其父组件中使用。 定义组件时,需要使用 Vue.component() 方法,该方法需要传入两个参数:组件名称和组件配置对象。组件名称应该采用 kebab-case(短横线分隔命名)格式,以便在 HTML 中使用。 示例代码如下: ```javascript // 定义一个名为 button-counter 的新组件 Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' }) ``` 在上述代码中,我们定义了一个名为 button-counter 的组件,该组件包含一个计数器,每次点击按钮计数器加一。 在 HTML 中使用组件时,需要使用组件名称作为自定义标签来调用组件。示例代码如下: ```html <div id="app"> <button-counter></button-counter> </div> ``` 在上述代码中,我们调用了 button-counter 组件,并将其渲染到了 id 为 app 的 div 元素中。 除了组件的 data 和 template 属性外,还可以使用 props 属性来传递组件之间的数据。使用 props 时,需要在组件的配置对象中定义 props 属性,并在 HTML 中使用 v-bind 指令来传递数据。 示例代码如下: ```javascript // 定义一个名为 todo-item 的新组件 Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) // 创建一个 Vue 实例 var app = new Vue({ el: '#app', data: { groceryList: [ { id: 0, text: '蔬菜' }, { id: 1, text: '水果' }, { id: 2, text: '奶酪' } ] } }) ``` 在上述代码中,我们定义了一个名为 todo-item 的组件,并使用 props 属性定义了一个名为 todo 的 prop。在 HTML 中,我们使用 v-bind 指令将 groceryList 数组中的每个对象传递给了 todo-item 组件。示例代码如下: ```html <div id="app"> <ul> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item> </ul> </div> ``` 在上述代码中,我们使用 v-for 指令遍历 groceryList 数组,并使用 v-bind 指令将数组中的每个对象传递给了 todo-item 组件。注意,我们还需要使用 v-bind:key 指令来为每个列表项指定一个唯一的 key 值。 插槽是 Vue.js 中另一个重要的概念。插槽可以让父组件在子组件中插入任意的 HTML 内容,使得组件更加灵活、可复用。 在子组件中,使用 <slot> 标签来定义插槽。在父组件中,使用子组件的自定义标签来调用组件,并在标签内部插入 HTML 内容。示例代码如下: ```javascript // 定义一个名为 alert-box 的新组件 Vue.component('alert-box', { template: ` <div class="alert-box"> <strong>Error!</strong> <slot></slot> </div> ` }) // 创建一个 Vue 实例 var app = new Vue({ el: '#app' }) ``` 在上述代码中,我们定义了一个名为 alert-box 的组件,并在组件中定义了一个插槽。在 HTML 中,我们调用了 alert-box 组件,并在标签内部插入了一些 HTML 内容。示例代码如下: ```html <div id="app"> <alert-box> <p>Something bad happened.</p> </alert-box> </div> ``` 在上述代码中,我们调用了 alert-box 组件,并在标签内部插入了一些 HTML 内容。该 HTML 内容会被插入到 alert-box 组件的插槽中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值