• 组件
• 根组件（父组件）
• 局部组件（子组件）
• 全局组件
• 父组件传递数据给子组件
• 子组件传递数据给父组件
  • 精华
  • 补充
• 父子组件实现todoList
• 扩展
  • 扩展1
  • 扩展2

创建、注册、使用子组件的三部曲

组件

1、组件：由html、css、js三部分组成的独立单位，可以类似于变量，重复使用
2、组件其实就是vue实例(对象)，一个组件就是一个vue实例(对象)
3、new Vue()产生的也是实例(对象)，所以也是组件，我们称之为 根组件
一个页面建议只出现一个根组件（项目开发模式下，一个项目建议只出现一个根组件）
4、组件的html页面结构有 template 实例成员提供
template提供的html结构是用来构虚拟DOM
真实DOM最终会被虚拟DOM替换
根组件一般不提供template，就由挂载点el来提供构建虚拟DOM的页面结构，根组件如果提供了template，还需要设置挂载点作为替换占位
template模板有且只有一个根标签

• 每一个组件都是一个vue实例
• 每个组件均具有自身的模板template，根组件的模板就是挂载点
• 每个组件模板只能拥有一个根标签
• 子组件的数据具有作用域，以达到组件的复用

根组件（父组件）

    
{{ msg }}

    

        {{ msg }}
    

局部组件（子组件）

在根组件template中加载的组件，称之为根组件的子组件
1、定义组件
2、注册组件
3、使用组件

如何定义子组件：组件就是一个普通对象，内部采用vue语法结构，被vue注册解释后，就会成为vue组件

重点使用template components

全局组件

了解：全局组件，不要注册就可以直接使用

父组件传递数据给子组件

• 通过绑定属性的方式进行数据传递
• ? 1.数据在父组件中产生
  ? 2.在父组件中渲染子组件，子组件绑定自定义属性，附上父组件中的数据
  ? 3.子组件自定义属性在子组件的props成员中进行声明(采用字符串发射机制)
  ? 4.在子组件内部，就可以用props声明的属性(直接作为变量)来使用父组件中的数据
• props
• 方法1props:['bb']
• 方法2 props:{aa:'bb' }

子组件传递数据给父组件

• 通过发送事件请求的方式进行数据传递

    

        
        留言
        

            
        
    

精华

    let tag = {
        props: ['msg', 'index'],
        template: `
        

            x
            {{ msg }}
        
        `,
        methods: {
            fn () {
                // 点击子集，要告诉父级删除第几条数据，因为comments在父级中
                // 需要通知父级
                this.$emit('f1', this.index);
            }
        }
    };

 data: {
            msg: '',
            comments: localStorage.comments ? JSON.parse(localStorage.comments) : [],
        },
        components: {
            tag,
        },
        methods: {
            send_comment() {
                if (this.msg) {
                    this.comments.push(this.msg);
                    this.msg = '';
                    localStorage.comments = JSON.stringify(this.comments);
                }
            },
            deleteMsg(index) {
                this.comments.splice(index, 1);
                localStorage.comments = JSON.stringify(this.comments);
            }
        }
    })

补充

父子组件实现todoList

    

        
        提交
    
    

        
        
    

扩展

扩展1

子组件中可以继续注册子组件

本题展示多个样本二哈图片

扩展2

子传父扩展，子组件输入修改父组件的标题

    
    



    
 {{ title }}