Vue组件基础

组件

//注：本文章为初学萌新所作，如有大佬可以指点错误！！

组件分为三步骤

1定义组件

2注册组件

3调用组件

定义组件

局部组件

let 组件名 = Vue.extend({
    template:``,
    data(){
        return{
    
        }
    }
})

1.1全局组件

Vue.component('组件名',{
   template:''
    data(){
        return{
        
        }
    }
})

注册组件

注册组件在定义vue实例中注册

Let vm = new Vue({
    el:'',
    component:{
        注册的组件名
    }
})

注：全局组件不需要注册

调用组件

在div中写

<div>
    <组件名></组件名>
</div>
//注：这是基础的组件写法，因为初学所以不会有其他因素影响。
但后面会有顶级父组件的嵌套，这个写法就属于父组件

下面是一个简陋的小案列

父组件app
<template id="app">
    <div>
        
    </div>
//嵌套，子组件在父组件中调用
    <zi></zi>
</template>


子组件zi
<template id="zi">
    <div>

    </div>
</template>

Template模块化使用

Template可以不在定义组件中写，因为在组件中写没有提示比较麻烦

模块化在div外面写，与div同级

<Template id=’模板名’>         //模板名一般组成规则 组件名_temp，容易理解
    <div>
        <h1></h1>
    </div>
</template>

组件传值

props        //父给子

props即道具，用来接受父组件中定义的数据，值为 数组

<div>
    <parent name="title"></parent>
</div>

<script>
Vue.component('parent',{
    props:['name'],
    template:'<div>我是父组件{{ name }}</div>'
}
</script>

//结果为  我是父组件title

$emit        //子给父

$emit能够将子组件中的数值传递到父组件中去，$emit可以触发父组件中定义的事件，通过传递参数的方式完成

<div id="app">
    <parent></parent>
</div>
<!-- 子组件 -->
<template id="chi-temp">
    <div>
        <button @click="click">点击</button>
        <input type="text" v-model="message">
    </div>
</template>
<!-- 父组件 -->
<template id="par-temp">
    <div>
        <child @clildfn="tranContent"></child>
        子组件传来的值：{{message}}
    </div>
</template>

<script>
        //子组件
        Vue.component('child',{
            template:'#chi-temp',
            data(){
                return{
                    message:'子组件发来贺电！'
                }
            },
            methods:{
                click(){
                    this.$emit('clildfn',this.message)
                }
            }
        })
        //父组件
        Vue.component('parent',{
            template:'#par-temp',
            data(){
                return{
                    message:''
                }
            },
            methods:{
                tranContent(payload){
                    this.message = payload
                }
            }
        })

        let vm = new Vue({
            el:'#app',
        })
</script>