Vue学习记录（codewhy）注册组件步骤、语法糖、子组件和父组件、组件和模板分离、数据存放问题、父子组件的通信、父子组件的访问方式

什么是组件化

将一个页面拆分成一个一个小的功能块 每一个功能块完成属于自己这部分独立的功能 name之后整个页面的管理和维护就变得非常容易了

• 提供了一种抽象 可以让我们开发出一个个独立可复用的小组件来构造我们的应用
• 所有的应用都会被抽象成为一颗组件树
• 尽可能将页面拆分成一个个小的可复用的组件
• 这样我们的代码更加方便组织和管理 并且拓展性也更强
  

注册组件的基本步骤

• 创建组件构造器
• 注册组件
• 使用组件
  
  
• 注意组件必须挂载在某个Vue实例下 否则不会生效
• 这里注册组件是全局组件 意味着可以在多个Vue实例下面使用
  
  如何注册的组件才是局部组件？（开发用的最多 而且一般只有一个Vue实例）——在Vue实例里面注册
  

父组件和子组件

	<div id='app'>
        <cpn2></cpn2>
    </div>
    <script type=text/javascript>
    //创建第一个组件构造器(子组件)
    const cpnC1 = Vue.extend({
        template:`
        <div>
        <h2>我是标题1</h2>
        <p>我是内容1</p>
        </div>
        `
    })
    //创建第二个组件构造器(父组件)
    const cpnC2 = Vue.extend({
        template:`
        <div>
        <h2>我是标题2</h2>
        <p>我是内容2</p>
        <cpn1></cpn1>
        </div>
        `,
        components:{
            cpn1:cpnC1
        }
    })
    Vue.config.productionTip = false;  
    //可以把Vue也当做一个组件 就是root组件
    const app = new Vue({
    el: '#app',  
    data: {
    message: 'hello'
    },
    components:{
            cpn2:cpnC2
        }
    })
    </script>

注册组件语法糖

全局组件注册

语法糖：

局部组件注册

语法糖：

组件和模板分离写法

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

2.使用template标签

组件中的数据存放问题

• 组件是一个单独功能模块的封装 这个模块有自己的html模板 也应该有属性自己的数据data
• 组件是无法访问Vue实例里的数据data的
• 即使可以访问 如果所有的数据都放在Vue实例中 就会变得非常臃肿 不建议
  
• 组件对象也有一个data属性 只是这个data属性必须是个函数
• 而且这个函数要返回一个对象 对象内部保存的是数据

obj不是同一个对象

obj都是同一个对象

子组件和父组件的通信

• 父组件通过props向子组件传递数据
• 子组件通过自定义事件向父组件发送消息
  
  父组件通过props向子组件传递数据
  用v-bind 把movies当做一个变量来寻找
  
  
  1、2是对象写法（开发中常用）
  除了type、default（默认值 没有传值的时候显示的） 还可以用required 如果required=true 意味着设置必须传值 不然会报错

对于default的限制（但是我的编译器里没有报错）

还可以添加自定义的验证函数

props驼峰标识问题

在绑定的时候必须采用这种写法 不然不能识别
子组件通过自定义事件向父组件传递数据
常见场景：子组件里产生了一些事件希望父组件知道

父子组件的访问方式

父组件访问子组件—$children

$children

children是数组形式
注意下标值来获取元素的方法变动较大 开发中不常用

$refs（常用）

this.$refs.aaa.name——getname
$refs默认是一个空的对象 必须是给一个名字

子组件访问父组件

parent

root