Vue组件

Vue组件

组件的概念

可复用的 Vue 实例，且带有一个名字

<div id="app">
    <!--{{ msg }}-->
</div>

<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '组件替换了'
        }
        template: '<p>{{  }}</p>'
    })
</script>

组件的分类

根组件

new Vue()生成的组件就是根组件

可以不明确template,template采用挂载点页面结构;如果设置的template,挂载点内部的内容会无效,因为会被替换

注意:html和body标签不可以被替换掉,因此不能设置为挂载点

全局组件

Vue.component('组件名', {})

{}内部采用的是Vue语法

<div id="app">
    <global-tag></global-tag>
</div>

<script src="js/vue.js"></script>
<script>
    Vue.component('global-tag', {
        template: `
        <p>{{ msg }}</p>
        `,
        data() {
            return {
                msg: '全局组件信息'
            }
        }
    })
    
    new Vue({
        el: '#app',
        
    })
</script>

局部组件

组件名 = {}

{}内部采用的是Vue语法

<div id="app">
    <local-tag></local-tag>
</div>

<script src="js/vue.js"></script>
let localTag = {
    template: `
    <p>{{ msg }}</p>

    `
}


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

组件的特点

组件都有管理组件html页面结果的 template 实例成员, template中有且只有一个根标签
根组件都是作为最顶层的父组件,局部和全局组件作为子组件,也可以作为其他局部或全局组件的父组件
子组件的数据需要隔离(数据组件化, 每一个组件都有自己数据的独立的名称空间)
局部组件必须注册后才能使用,全局组件不需要注册,建议使用局部组件
组件中出现的所有变量(模板中,逻辑中),都由组件自己管理
局部全局和根组件都是vue的一个实例,一个实例对应一套html,css和js结构,所以实例就是组件

组件化

局部或者全局组件,一个组件都有可能会被复用多次,每个组件都应该有自己独立的变量名称空间

data() {
    return {
        
    }
}

方法执行后会产生一个局部作用域,所以数据可以作为方法的返回值,来实现数据的组件化

组件传参

父传子

子组件可以通过props自定义组件属性(采用反射机制,需要填写字符串,但是使用时可以直接作为变量)
子组件会在父组件中渲染,渲染时,将父组件的变量绑定给子组件的自定义属性,可以将变量值传递给子组件

<div id="app">
    <local-tag :msg="msg"></local-tag>
</div>

<script src="js/vue.js"></script>
<script>
    let localTag = {
        props: ['msg'],
        template: `
            <p>{{ msg }}</p>
        `,
        data() {
            return {
                msg: '局部组件信息'
            }
        }
    };

    new Vue({
        el: '#app',
        data: {
            msg: '根组件信息'
        },
        components: {
            localTag
        }
    })
</script>

页面优先显示的是根组件信息

props还可以传对象,用来确定数据类型

子传父

自定义事件是属于子组件的,子组件在父组件中渲染并绑定父组件的事件方法(事件方法在父组件上实现)
子组件如何触发自定义事件: this.$emit('自定义事件', 触发事件回调的参数们)

子组件触发自定义事件,并传入子组件的数据内容,然后在父组件中拿到子组件的消息

<div id="app">
    <local-tag @action="actionFn"></local-tag>
    <p>{{ p1 }}</p>

</div>

<script src="js/vue.js"></script>

<script>
    let localTag = {
        template: `
        <input type="text" v-model="msg" @input="changeMsg">
        `,
        data() {
            return {
                msg: '局部组件信息'
            }
        },
        methods: {
            changeMsg() {
                this.$emit('action', this.msg)
            }
        }
    };

    new Vue({
        el: '#app',
        data: {
            p1: 'NaN'
        },
        components: {
            localTag
        },
        methods: {
            actionFn(a) {
                this.p1 = a;
            }
        }

    })
</script>

Day 67 Vue组件