vue学习

1. 调用Vue.extend()方法 - 创建组件构造器
2. 调用Vue.component()方法 - 注册组件
3. 在Vue实例的作用范围内 - 使用组件

全局组件 / 局部组件：

全局组件案例：

<div id="app">
    //使用组件
    <my-cpm></my-cpm>
</div>

//创建组件构造器
const cpnC = Vue.extend({
    template: '
    <div>
        <h2>标题</h2>
        <p>模板</p>
    </div>'
})

//注册组件
Vue.component('my-cpn', cpmC)

const app = new Vue({
    el: '#app',
    data:{
        message: ''
    }
})

局部组件：

<div id="app">
    <my-cpm></my-cpm>
</div>

const cpnC = Vue.extend({
    template: '
    <div>
        <h2>标题</h2>
        <p>模板</p>
    </div>'
})

const app = new Vue({
    el: '#app',
    data:{
        message: ''
    },
    components: {
        cpn: cpnC
    }
})
 

父组件 / 子组件

父子组件的错误用法: 以子标签的形式在Vue实例中使用

1. 因为当子组件注册到父组件的components时, Vue会编译好父组件的模块
2. 该模块的内容已经决定了父组件将要渲染的HTML (相当于父组件中已经有子组件中的内容了)

组件通讯

父子组件的通讯

父组件通过props向子组件传递数据

<div id="app">
    <cpm v-bind:cmovies="movies" v-bind:cmessage="message"></cpn>
</div>

<template id="cpn">
    <div>
        <li v-for="item in cmovies">{{item}}</li>
        <h2>{{cmessage}}</h2>
    </div>
</template>

const cpn = {
    template: '#cpn',
    // 把数组里的当变量来看了
    props: ['cmovies', 'cmessage'],
    data () {
        return {}
    }
}

const app = new Vue({
    el: '#app',
    data: {
        meassage: '哈哈哈',
        movies: ['哈喽', '嗨', '哟哟']
    },
    components: {
        cpn
    }
})
 

子组件通过事件向父组件发送数据

// 父组件模板
<div id="app">
    // 2.父组件监听一个事件
    // 不能写驼峰
    <cpm @itemclick="cpnClick"></cpn>
</div>

// 子组件模板
<template id="cpn">
    <div>
        <button v-for="item in categories" 
                @click="btnClick(item)">
            {{item.name}}
        </button>
    </div>
</template>

// 子组件
const cpn = {
    template: '#cpn',
    data() {
        return {
            categories: [
                {id: 'aaaa', name: '热门推荐'},
                {id: 'bbbb', name: '手机数码'},
                {id: 'cccc', name: '家用家电'},
                {id: 'dddd', name: '电脑办公'},
            ]
        }
    },
    methods: {
        btnClick(item) {
            // 要把item传给父组件
            // 1. 发送一个事件 (自定义事件)
            // 会把item当成默认的传到父组件去
            this.$emit('itemclick', item)
        ]
    }
}

// 父组件
const app = new Vue({
    el: '#app',
    data: {
        meassage: '哈哈哈'
    },
    components: {
        cpn
    },
    methods: {
        // 3. 父组件监听的事件 
        cpnClick(item) {
            console.log('成功了', item);
        }
    }
})
 

组件规则

1.向外暴露的名称需要使用驼峰命名(推荐使用)，使用-连接

2.导入组件时，取的名称最好暴露的名称一致，名称可以任意定义(不推荐)

3.但凡注册了组件，必须使用组件

组件命名规则
1. 当使用 kebab-case (短横线分隔，如Vue.component('my-component-name', { /* ... */ })) 定义一个组件时，你在引用这个自定义元素时也必须使用 kebab-case，则必须使用<my-component-name>引用组件
2. 当使用 PascalCase (首字母大写，如Vue.component('MyComponentName', { /* ... */ })) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的

3.prop命名规则
prop一般情况下使用camelCase (首字母小写，驼峰命名法，如组件内使用{props: ['myProp']})命名