视频学习笔记03

视频学习笔记

vue中的组件

组件化的基本使用

1.用Vue.extend()创建组件构造器对象，传入的template代表我们自定义组件的模板
2.注册组件
Vue.component(‘组件的标签名’,组件构造器)
3.直接可以用组件的标签名来引用模板

    const cpnC=Vue.extend({
        template:`
        <div>
	        <h2>我是标题</h2>
	        <p>我是内容一</p>
        </div>`
    })
 Vue.component('my-cpn',cpnC)

全局组件和局部组件

全局组件意味着可以在多个vue下面使用， 直接用Vue.component(‘组件的标签名’,组件构造器)注册的组件为全局组件
在父组件里注册的为局部组件,局部组件仅能在该vue实例下使用

    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello'
        },
        // 局部组件
        components: {
            cpn: cpnC
        },
    })

父组件和子组件

组件和组件之间有层级关系
子组件只能在父组件中被识别

    // 1.创建第一个组件
    const cpnC1=Vue.extend({
        template:`
        <div>
        <h2>我是标题</h2>
        <p>我是子组件的内容</p>
        </div>`
    })

    // 2.创建第二个组件（父组件）
    const cpnC2=Vue.extend({
        template:`
            <div>
            <h2>我是标题</h2>
            <p>我是父组件内容</p>
            <cpn1></cpn1>
            </div>`,
        components: {
        cpn1: cpnC1,
    }
    })

// root
    const app = new Vue({
        el: '#app',
        data: {
            fruit:'apple',
        },
        // 局部组件
        components: {
            cpn2: cpnC2,
        },
    })

组件模板的分离写法

1.用script标签，注意类型必须是text/x-template

<script type="text/x-template" id="cpn">
    <div>
        <h2>我是标题</h2>
        <p>我是内容</p>
    </div>
</script>

2.用template标签

<template id="cpn">
    <div>
        <h2>我是标题</h2>
        <p>我是内容</p>
    </div>
</template>

存放组件的data

1.组件是一个单独功能模块的封装，这个模块有自己的html模板，也有属于自己的data数据，组件中是不能直接访问vue实例中的data
2.组件中的data必须是函数，因为函数每次返回的都是不同的实例对象，改变之后不会相互影响，可以保存自己的状态

父子组件通信传递-父传子

子组件是不能引用父组件或者vue实例的数据的，但是需求中可能会出现在一个页面中，一些数据需要从上层传递到下层，直接让大组件将数据传递给小组件
使用选项props来声明需要从父级接受到的数据
props的值有两种方式：
1.字符串数组，数组中的字符串就是传递时的名称

props: ['cmovies','cmessages']

2.对象，对象可以设置传递时的类型，也可以设置默认值

            cmessages: {
                type: String,
                // 类型是对象或者数组时，默认值必须是一个函数
                default: 'abc',
                required: true
                // 必须传值
            },

父子组件通信传递-子传父

通过事件向父组件发送消息
自定义事件流程：
在子组件中，通过$emit()来触发事件
在父组件中，通过v-on来监听子组件事件