Day 67 Vue组件

目录

• 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>

组件的特点

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

组件化

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

data() {
    return {
        
    }
}

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

组件传参

父传子

1. 子组件可以通过props自定义组件属性(采用反射机制,需要填写字符串,但是使用时可以直接作为变量)

2. 子组件会在父组件中渲染,渲染时,将父组件的变量绑定给子组件的自定义属性,可以将变量值传递给子组件

<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还可以传对象,用来确定数据类型

子传父

1. 自定义事件是属于子组件的,子组件在父组件中渲染并绑定父组件的事件方法(事件方法在父组件上实现)
2. 子组件如何触发自定义事件: 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>