Vue:简单了解组件

Vue组件基础–简单了解vue组件

Vue组件是什么?

组件就像是提前做好的模具,使用时拿出来就行,可以重复调用,它跟普通的Vue有一样的属性:

1、data (数据存放)

2、computed(计算属性)

3、watch(监听属性)

4、methods(方法存放)

熟悉的人应该看出来了,组件并没有el属性,组件没有根节点相关的属性。

组件的data必须是一个函数,这样多个组件才不会相互影响。

data: function () {
  return {
    count: 0
  }
}

组件可以通过Prop 对子组件进行传值,可以使用v-bind动态传递prop的数据

<div id="app">
    <my-p v-for="item in list" 
    :title="item.title"><!-- 使用v-bind(:)动态传递prop -->
    </my-p>
</div>
Vue.component('my-p',{
    props:['title'],  //props向子组件传递数据
    template:'<p>{{title}}</p>'
})
new Vue({
    el:"#app",
    data:{
        list:[
            { id: 1, title: 'My journey with Vue' },
            { id: 2, title: 'Blogging with Vue' },
            { id: 3, title: 'Why Vue is so fun' }
        ]
    }
})

组件的监听子组件事件

主要通过子组件的 $emit 方法并传入事件名触发事件

emit可以使用第二个参数向上抛值,监听的父组件通过event获取

<div id="app">
    <div :style="{fontSize:size + 'px'}"> <!-- 字体大小通过size动态获取 -->
        <my-p v-for="item in list"
        :title="item.title" 
        @addsize="size += $event"> <!-- $event获取子组件通过$emit抛的值 -->
        </my-p>
    </div>
</div>
Vue.component('my-p',{
    props:['title'],  //props向子组件传递数据
    template:`<div>
                <p>{{title}}</p>
                <button @click="$emit('addsize',10)">点击放大</button>
            </div>`
            //子组件通过 $emit  方法并传入事件名触发事件
            //$emit可以使用第二个参数向上抛值,监听的父组件通过$event获取
})
new Vue({
    el:"#app",
    data:{
        list:[
            { id: 1, title: '这是第一个' },
            { id: 2, title: '这是第二个' },
            { id: 3, title: '这是第三个' }
        ],
        size:14
    }
})

组件中v-model的实现

当input事件触发时,通过$emit对数据进行抛出

<div id="app">
    <!-- 组件中v-model的使用 -->
    <my-input v-model="myText"></my-input>
    <p>{{myText}}</p>
</div>
Vue.component('my-input', {
 props: ['value'],//通过props动态数据传递
 template: `
    <input
      :value="value"
      @input="$emit('input', $event.target.value)"
    >
  `
  // input事件触发时,通过$emit对数据进行抛出
})
new Vue({
    el:"#app",
    data:{
        myText:''
    }
})

动态组件

通过:is实现tab切换效果

<div id="app">
    <button
    v-for="item in list"
    @click="currList = item">{{item}}</button>
     <!-- 通过点击的item给currList赋值 -->
    <component :is="curr"></component> 
    <!-- 通过:is="curr"的curr值进行组件的切换 -->
</div>
Vue.component("my-div", {
    template: "<div>Home component</div>"
});
Vue.component("my-div2", {
    template: "<div>Posts component</div>"
});
new Vue({
    el:"#app",
    data:{
        list:['div','div2'],
        currList:'div'
    },
    computed:{
        curr: function() {
            return "my-" + this.currList;  
            //修改组件的curr值改变组件的显示
        }
    }
})
上一篇:大话存储系列19——数据容灾


下一篇:Vue.js 2使用中的难点举例--子组件,slot, 动态组件,事件监听