vue_03总结

Posted 2021-03-22 zhangchaocoming

vue_03总结

1、组件：
    html、css、js的集合体
    vue实例就代表组件
    组件用template实例成员管理html结构，有且只有一个根标签
    子组件可以复用，所以数据要组件化处理，data的值由方法的返回值提供

2、分类：
    根组件：new Vue({})，顶级组件
    全局组件: Vue.component('组件名', {})，不用注册可以在任何地方使用
    局部组件：let 组件名 = {}，只有在注册的父组件中才能使用
    
3、组件间传参：
    父传子：自定义属性
    <tag :info="msg"></tag>
    
    let tag = {
        props: ['info'],
    }
    new Vue({
        data: {msg: 12345}
        components: {
            tag,
        }
    })
    
    子传父：自定义事件
    <tag @action="fn"></tag>
    
    let tag = {
        data: {msg: 12345},
        methods: {
            tag_fn() {
                this.$emit('action', this.msg)
            }
        }
    }
    new Vue({
        components: {
            tag,
        },
        methods: {
            fn(info) {}
        }
    })
    
4、vue项目环境
    官网下载安装node => 将npm换源为cnpm => cnpm install -g @vue/cli
    
    => vue项目创建...