zoukankan      html  css  js  c++  java
  • vue组件的基本使用,以及组件之间的基本传值方式

    组件(页面上的每一个部分都是组件)
    1.三部分:结构(template),样式(style),逻辑(script)
    2.组件的作用:复用
    3.模块包含组件
    4.组件创建:
        1.全局组件:Vue.component();
        2.局部组件:components();
            参数1:组件的名称
            参数2:组件的配置项
    *组件的配置项:
        1.new Vue这个里面有什么参数,那么组件的配置项中就有什么参数,包含生命周期
        2.组件内部多了一个属性template
        3.组件内部的data不在是一个对象,而是一个函数
    组件的使用:
        1.直接将组件的名称当做标签使用即可
        2.组件名称首字母必须大写
    5.脚手架的使用
        1.安装:
            3.0 cnpm install @vue/cli -g
            2.9.3 cnpm install vue-cli -g
        2.创建项目
            3.0 vue create <项目名称>
            2.9.3 vue init webpack <项目名称>
    6..组件间的传值(组件之间的通讯)
        一.父子通信
        1.父传子
           传递:当子组件在父组件当做标签使用的时候,通过给子组件绑定一个自定义属性,值为需要传递的数据
            接收:在子组件内部通过props进行接收
                接收方式有两种:
                    1.一种是数组接收,2.另一种是对象接收
                    一般情况下我们都使用对象进行接收,因为对象接收可以校验数据的类型
    eg:
    props:["val"];
    props:{
        val:String//当这个是number的时候,就会有警告
    }
        2.子传父
            (1)传递:当子组件给父组件传递数据的时候,通过调用父组件给子组件绑定的自定义事件,然后将传递过去
            接收:父组件通过自定义事件的函数来接收子组件传递过来的数据(注意这个自定义方法的函数在绑定的时候不需要加())
            (2)作用域插槽
        二、 非父子
            1.在vue的原型身上添加一个公共的vue实例,组件之间调用这个公共的实例的$on and $emit来传递数据,传递的一方调用$emit,接收的一方用$on;
            2.手动封装$on $emit $off(原理应用了观察者模式)
            3.EventBus
            4.vuex
     
  • 相关阅读:
    正则表达式
    模块的初始
    装饰器 1
    匿名函数
    内置函数一(待跟新)
    python 学习迭代器的认识
    python 学习笔记 —— 函数的认识
    搭建yum 源
    python 学习第六天 文件的处理方式
    python 学习第五天 字典得 增删改查
  • 原文地址:https://www.cnblogs.com/xuazi-7an/p/10567550.html
Copyright © 2011-2022 走看看