Vue 组件

一支海棠

于 2021-04-19 14:37:12 发布

阅读量62

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/m0_45136861/article/details/115863418

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

全局组件

在 new Vue 之前
全局组件定义了任何vue中都可以使用
以下为定义全局组件并在两个 vue中使用

<div id="app">
        <Com1></Com1>     
    </div>
    <div id="app1">
        <Com1></Com1>     
    </div>
       //全局组件 在 new Vue 之前
    // 全局组件定义了 任何vue中都可以使用
    Vue.component('Com1',{
    template:'<div>我是全局组件</div>'
})

new Vue({
    el:'#app',
})
new Vue({
    el:'#app1',
})

局部组件

只能在Vue定义的范围内使用

new Vue({
    el:'#app',
    components:{  // 局部组件 只能在Vue定义 的范围内 使用
        Com2:{
            template:'<div>我是局部组件</div>'
        }
    }
})```
局部组件的使用
```java
<body>
    <div id="app">
        <Com1></Com1>     
    </div>
</body>
<script src="vue.js"></script>
<script>
var Com1={
    template:'<div @click="show">{{msg}}</div>',
        data:function(){
            return{
                msg:'我是局部组件'
            }
        },
        methods:{
            show:function(){
                alert(1);
            }
        }
}

new Vue({
    el:'#app',
    data:{
        
    },
    components:{  // 局部组件 只能在Vue定义 的范围内 使用
        Com1:Com1,
    }
})

组件的复用

组件复用通过 props传递参数

 <div id="app">
        <Com2 col="red"></Com2>
        <Com2 col="blue"></Com2>      
    </div>
</body>
<script src="vue.js"></script>
<script>
var Com1={
    template:`<div>
        <span :style="{color:col}">{{msg}}</span>
        </div>`,
        data:function(){
            return{
                msg:'我是局部组件'
            }
        },
        props:['col'],
}

组件的嵌套

组件里面还可以继续封装组件

var Com3={
        template:`<div>
                   我是子组件 
                </div>`
    }
var Com1={
    template:`<div>
        <div @click="show">{{msg}}</div>
        <Com3></Com3> 
        </div>`,
        data:function(){
            return{
                msg:'我是局部组件'
            }
        },
        methods:{
            show:function(){
                alert(1);
            }
        },
        components:{
            Com3:Com3
        }
}

全局组件的嵌套定义了全局组件可以在任何组件或vue中使用

 Vue.component('Com1',{
        template:`<div><div>我是全局组件</div>
            <Com2/>
        </div>`
    })

    Vue.component('Com2',{
    template:'<div>我是子组件</div>'
    })

父子组件通信

父级给子级通信
子组件使用的地方

子组件定义的地方
props:[‘tit’]

 Vue.component('Com1',{
    template:`<div><div>我是全局组件</div>
                <Com2 :tit="msg"></Com2>
    </div>`,
    data(){
        return {
            msg:'我是父级数据'
        }
    }
    })
let Com2 ={
    template:'<div>我是子组件------{{tit}}</div>',
    props:['tit']
}
    Vue.component('Com2',Com2)

new Vue({
    el:'#app',
})

子组件给父组件传递数据
子组件使用的地方
<Child @fn=“onFn”>
子组件定义的地方
this.$emit(‘fn’,参数)

let Com1 ={
    template:`<div> <div>我是全局组件 ----{{msg}}</div> 
    <Com2 @fn="onFn"></Com2> </div>`,
    data(){
        return{
            msg:''
        }
    },
    methods:{
        onFn(v){
            this.msg=v
        }
    }
}
let Com2 ={
    template:'<div>我是子组件</div>',
    data(){
        return{
            msg:'子组件数据'
        }
    },
    mounted(){
        this.$emit('fn',this.msg)
    },
}

直接获取数据

获取父级 this. $p a r e n t 获取子级 t h i s .$ childern 获取的是一个数组
不仅可以获取数据 data 还可以调用方法等

let Com1 ={
    template:`<div> <div>我是全局组件</div>  <button @click="get">按钮</button><Com2></Com2> </div>`,
    data(){
        return{
            msg:'父组件数据'
        }
    },
    methods:{
        get(){
                console.log(this.$children[0].msg);
        },
        show(){
            alert(1)
        }
    }
    }
    let Com2 ={
    template:`<div><span>我是子组件</span> <button @click="get">按钮</button></div>`,
    data(){
        return{
            msg:'子组件数据'
        }
    },
    methods:{
        get(){
            this.$parent.show();
            console.log(this.$parent.msg);
        }
    }
    }
    Vue.component('Com1',Com1)
    Vue.component('Com2',Com2)

插槽

let Com1 ={
    template:`<div> <div>我是全局组件</div>
              <Com2>
                <p slot="s1"> 我是一个传递的标签--{{msg}}</p>
                <p slot="s2"> 我是2个传递的标签--{{msg}}</p>
                </Com2> 
              </div>`,
              data(){
                  return{
                      msg:'123'
                  }
              }
    }
    let Com2 ={
    template:`<div> <slot name="s1"></slot><span>我是子组件</span> <slot name="s2"></slot></div>`,
    }
    Vue.component('Com1',Com1)
    Vue.component('Com2',Com2)

let Com1 ={
    template:`<div> <div>我是全局组件</div>
              <Com2>
                <template #s1=data>
                    <p> 我是一个传递的标签--{{msg}} --- {{data.tit}}</p>
                </template>
              </Com2> 
              </div>`,
              data(){
                  return{
                      msg:'123'
                  }
              }
    }
    let Com2 ={
        data(){
            return {
                msg:'我是子组件的数据'
            }
        },
        template:`<div><span>我是子组件</span> <slot name="s1" :tit="msg"></slot></div>`,
    }
    Vue.component('Com1',Com1)
    Vue.component('Com2',Com2)

let Com1 ={
    template:`<div> <div>我是全局组件</div>
              <Com2>
                <template #s1>
                    <p> 我是一个传递的标签--{{msg}}</p>
                </template>
                <template #s2>
                    <p> 我是2个传递的标签--{{msg}}</p>
                </template>
              </Com2> 
              </div>`,
              data(){
                  return{
                      msg:'123'
                  }
              }
    }
    let Com2 ={
    template:`<div> <slot name="s1"></slot><span>我是子组件</span> <slot name="s2"></slot></div>`,
    }
    Vue.component('Com1',Com1)
    Vue.component('Com2',Com2)

一支海棠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 组件

全局组件在 new Vue 之前全局组件定义了任何vue中都可以使用以下为定义全局组件并在两个 vue中使用<div id="app"> <Com1></Com1> </div> <div id="app1"> <Com1></Com1> </div> //全局组件在 new Vue 之前 // 全局
复制链接

扫一扫

专栏目录