Vue组件（学习笔记）

组件基础

Vue组件注册 入门

Vue 组件 代码复用和抽象的主要形式是组件 封装代码

组件当做小型的 单元实例对象 带有一个名称 (小巧 独立 可复用)

必须包含 一段 HTML标签的 代码块 (css样式 javascript代码)

显示页面 展示数据 修改数据

组件当做小型的 vm 实例对象 (组件系统 vue 核心)

1. 全局注册

Vue.component("test", {
            template: "<div>组件test</div>"
        })
        
 Vue.component(name,options)  全局注册  name 组件名称  options 组件选项参数 

2. 局部注册

var vm = new Vue({
            el: "#app",
            data: {
                title: "组件基础"
            },
            components: {
                demo: {
                    template: "<div>这是局部注册</div>"
                }
            },
        })
        
 components  局部注册

组件命名规则

组件名 不能跟 html 标签一致
mHead 遵循驼峰名 m-head
组件首字母 可以大写 (单文件组件 JS 文件 )
组件的模板 只能包含一个 根元素 顶层标签
组件书写可以使用单标签
HTML标签不允许驼峰命名 例如

<div id="app">
        <first-cpt></first-cpt>
    </div>
 Vue.component("firstCpt", {
            template: "<div>第一个组件</div>"
        })

// 组件名 firstCpt => html first-cpt   遵循 ECMA规范

使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项(el data computed methods mounted filters components directives )的对象

组件的选项参数 包含 之前你在实例写的任何属性

data 除外 在组件里面 data 属性必须是一个函数 必须有返回值 必须返回一个对象

例如

var nav = {
            template: "<div>组件</div>",
            data() {
                return {
                    // 避免命名冲突 避免变量污染
					// 用函数封起来 不会向外传递 也不会受到外面污染 只受用于 nav
                }
            },
            mounted: {},
            computed: {},
            filters: {},
            directives: {}
        }
Vue.component("my-nav", nav)


<my-nav></my-nav>


// 注意 data必须是一个函数 而且必须要返回一个对象

Vue.extend

扩展得到一个 组件实例选项对象

var Slider = Vue.extend({
            template: "<div> slider </div>",
            data() {
                return {

                }
            },
            mounted: {},
            computed: {},
        })
        
new Slider().$mount("#slider")
Vue.component("mySlider", Slider)
// 使用
<div id="slider"></div>
<my-slider></my-slider>

独立 小巧 可复用

Vue.component("myButton", {
            template: "<button @click='contAdd'>{
  {cont}}</button>",
            data() {
                return {
                    cont: 1
                }
            },
            methods: {
                contAdd() {
                    this.cont++
                }
            }
        })
 // html
<my-button></my-button>
<my-button></my-button>
<my-button></my-button>
// 每一个都是单独的 可以重复的 小巧       下图是不同的点击

组件系统

1. 父子组件关系

        <A> 
            <B></B>
            <C></C>
        </A>

2. 兄弟组件关系

        <B></B>
        <C></C>

组件通信

	组件之间的通信  
        1. 父组件访问子组件      （父组件修改子组件）
		a. props  必须动态props 父组件修改自身的变量  把变化的值传入 子组件  子组件