Vue组件的深入理解

vue的组件的创建

模板对象的方式

1. 声明组件

# 还有一种方法，因为容易混淆，就不再赘述
Vue.component('assemble02',{
            template:"<h1>这是vue组件第二创建方式</h1>"
 })

2. 调用组件

<assemble02> </assemble02>

模板属性的方式(推介使用)

1. 声明组件

Vue.component("assemble03",{
            template: "#temp",
            data:function() {
                return {
                    msg:"组件中的data"
                }
            },
})

2. 调用组件

<assemble02> </assemble02>

私有属性的方式

1. 声明组件
var tmp1={
template: "#temp",
data:function() {
     return {
        msg:"组件中的data"
     }
  }
}
components:{
     tmp1
}

2. 调用组件

<assemble02> </assemble02>

组件切换

通过注册点击事件，改变属性值

<div id="app">
        <a href="" @click.prevent="name='login'">登陆</a>
        <a href="" @click.prevent="name='register'">注册</a>
        <transition mode="out-in">
            <component :is="name"></component>
        </transition>
</div>
var vm =new Vue({
             el:'#app',
             data:{
                name:'login'
             },
             methods:{
                
             },
});

子组件使用父组件的数据

1. 父组件绑定data属性到**“数据引用”**

<com1 v-bind:parentmsg="msg"> </com1>

2. 子组件声明**“数据引用”**并使用

components:{
                 com1:{
                    template:"<h1>这是一个子组件+++++{{ parentmsg }}</h1>",
                    data(){
                        return {}
                    },
                    // props的数据都是父组件传递过来的（只读的，不可修改）
                    props:['parentmsg']
                 }
}

子组件使用父组件的方法

1. 父组件绑定methods方法到**“方法引用”**

<div id="app">
    <com1 @func="show"> </com1>
</div>

2. 子组件调用方法引用

<template id="subs">
        <div>
            <h1>这是一个子组件</h1>
            <input type="button" value="调用父组件方法" @click="findparent">
        </div>
</template>

var com1={
             template:"#subs",
             data(){
                    return {}
             },
             methods:{
                    findparent(){
                        this.$emit('func');
                    }
             }
}

components:{
      com1
}