父子组件传值

一、现在开发模式遇到的问题：

问题：现在vue的项目，开发模式有一个大的缺陷

　　　　原生的vue项目的目录如下

 1.assets      //存放静态文件，
 2.components  //非页面级组件
 3.page        //存放页面姐组件
 4.router      // 存放 路由接口
 5.index.html  //进行控制根节点页面显示。

　　缺陷是什么？

　　 　　 一个组件需要三个文件进行控制

　　　　创建一个新的组件的时候还要注意 控制好class 值，避免多个组件中的class 值有冲突。

 　　　　Vue compontent("组件名称"，配置)

　　　　进行配置的时候，都会重复（每一个组件都需这个样子做），

　　　　配置过程中要通过axios的配置进行获得创建组件的内容。同时还要在 index.html中创建

　　　　一个 <style></style>标签,把样式添加到hearde 标签里面。

　　　（配置这两个的原因是因为 如果不这个样子写的话，就要在index.html页面中引入三个页面

　　　　这个样子就会让 index.html页面很难受。所以必须要这个样子写）

二、命名法：

1. pascal命名法：YueXiaoTing
2.Camel(骆驼)命名法： yueXtingTing
3.Kebab-case /ki baeb/ 短横线命名法 yue-xiao-ting

二、1、父子组件传值 有三处命名柜子规定：

第一：在子props中如果一个键 是由两个单词组合而成的，命名规则要遵循骆驼命名法

　　　在子的  html中  使用   的时候 和   props的使用方法一样

第二：在父亲使用的时候要和子props命名相对应，但是名称必须是遵循 短横线命名法 

第三 ：就是在查看错误的时候，所有的组件，浏览器自动统称为一个名字，

　　　这就会造成不容易查错误。所以

　　　在配置的时候就要 声明一个 name属性 name: 'pascal命名法：YueXiaoTing'

二.2、为什么要研究父子传值问题：

　　不管是什么开发语言，都要和后端开发人员要有联系。从而进行控制页面操作。

　　所以要解决 传值问题。

　　在开发过程中可能有些地方是重复使用的，这个样子我们就可以把一些重复操作的封装成一个组件。

　　组件的含义一定要牢记： 就是把一堆 html 代码封装起来，起一个名字，反复使用，简单的直接拿那个生成的标签使用

　　复杂的东西就需要进行传参。

　　生成的标签 只有 “vue” 才能读懂的 “biao签” ，这个标签名称我们可以随便一名字。

　　无论是 全局注册 还是 局部注册。

　　那么父子组件要解决那些问题：

　　1.父亲给子传值  传属性  传事件  在自己发明的标签中能不能在标签中间存放 html代码。

　　2.子组件给 父亲传值

　　对比： 普通标签 可以进行绑定事件   可以传一个属性  可以进行传值，可以在标签内容进行传输内容

　　<div @click = ""  :clss = "Islogin" id = "item.id">

　　　　<span>在div里面传内容</span>

　　</div>
举例解决问题：

　　这个案例 重要点：

　　　　传值之后你希不希望 子进行改变

      比如 购物车和详情页都有一个数量加减

　　所以就给这个重复使用的数量加减创建 一个组件

　　1.创建这个组件的名字为  mi-count   2.谁使用这个局部组件 谁就是它的父组件。

　　2.创建局部组件的时候要进行分析。比如父亲需不需给子进行传值，需不需要让子组件关太多

　　分析之后： 父亲需要给这个 封装好的组件 传 一个count 值

　　　　　　　一般情况 我们都认为需要把id也传给子组件对不对，但是有些情况是不需要的

　　　　　　　　为什么：因为 我只需要进行加减，我并不知道下一步要进行一些什么操作，

　　　　　　      而且每一个父亲调用我的时候，每一次操作都会不一样，

　　　　　　　　这个样子就会让我这个子组件有一定的负担。

　　　3.传值以后 

　　　　1.你传给我一个加函数和一个减函数事件 然后我去调

　　　　2.只要我进行加或者减 我就给你发送一个事件，然后你接受事件之后你想干什么就干什么。

　　　　所以父亲在使用的时候就会知道我会发送两个事件。

　　　　创建一个文件夹 mi-count

　　　　然后创建三个文件

　　　　　　html页面　　　　　

<div>
    //要取消默认行为
    <button :disabled ="count === 1" @click.prevent ="decreaseHandler">-</button>
    //使用 props 中的值和使用data一样。
    <span v-text= “count”></span>
    <button :disabled = "count ==== maxCount" @click.prevent ="increaseHandler">+</button>
</div>

　　　　　　在js 页面

var miCount = (function(){
    var componentConfig = {
        name: "", //在调试的是就可以看到哪一个问题出错。 
        //这个地方起名字就要使用 psk命名法。
        //todo....
        //这个节点用于组件对外的属性，父组件可以用对外公开的属性向当前组件传值
        这个命名一定要骆驼命名法。
        命名法的：三种
        在父亲中使用调的时候需要要使用 短横线
        //props:[“count”,"maxCount"], 比下面复杂 一般写西面
        //是对外公共 不要和data里面重名。要不然会出错。
         props：{
             count:{
                 type:Nuber,
                 //必传
                 required:true
             }，
             //只有一个的时候可以写成这个样子
             //maxCount：Number,
             maxCount:{
                 type:Number,
                 //可以不必传，如果不传我就用默认的，如果传我就使用你传的值
                 default:5
             }
         }，
         methods:{
             es6的写法，要发送事件，这个样子父组件才能使用
             increaseHandler(){
                 //$emit 是发射的意思。
                 this.$emit("increase",100);

                 this.$emit("increase"，传参10);
                //这个是对sycn托管的的使用，并不会对没有cscmde 进行任何影响。
                 this.$emit("update:count",count+1);
             },
             decreaseHandler(){
                 //里面的名字就是  父组件调用或者函数的名字
                  this.$emit("decrease");
                   this.$emit("update:count",count-1);
             }
         }


    };
    //这个就是把 html css 放在这个地方
    return vue.conponent("",function(){  //公共的需要起一个名字
    //这个有问题，所以要使用上面这个问题（将来使用的使用的时候就用下面这个）
    return vue.extend(function(){   // 局部注册这个不需要起，谁用我谁就自己起名字。

});

}).

父亲使用：

 //这个是你希望 我这个子来进行修改
　　<mi-count :count.sync ="item.count" :max-count = "7" @increase = "increaseHandler(item.id)" @decrease ="decreaseHandler(item.id)"></mo-count>
    如果子也传过来一个参数。  就写一个箭头函数
    只要传子，父本身不传 就是事件对象
    <mi-count :count.sync ="item.count" :max-count = "7" @increase = "increaseHandler" @decrease ="decreaseHandler(item.id)"></mo-count>
    <mi-count :count.sync ="item.count" :max-count = "7" @increase = " increaseHandler(item.id,$evebn)" @decrease ="decreaseHandler(item.id)"></mo-count>
    
    <mi-count :count.sync ="item.count" :max-count = "7" @increase = " e= >increaseHandler(item.id,e)" @decrease ="decreaseHandler(item.id)"></mo-count>
    

如果你不希望我修改的话，就不要 加  sync

js 页面

//一定要加 ： 如果不加 ： 的话，就会传的是一个字符串。
//如果加：就会当成一个js类型去接卸，解析为最后的属性。
1.在父亲的中就应该有一个 methods :{
    increaseHandler(num){
        console.log(num);  //这个就是实现了子传父的操作。
    },
    decreaseHandler(){}
}

2.在使用我的时候还要给我传一个值  那个值就是 count  
    所以在父亲里面还需要有一个 
　　　　data(){
        //这个名字叫什么都无所谓。，要把或者这个名字传给我
        count : 1
    }
3.通过分析需要传给我一个最大值，如果不传给我一个最大值，那么就需要有一个默认的最大值。
我知道内部知道maxCount 的最小值是1 最大值的默认值是5， 如果父组件告诉我最大值，我就用父组件告诉我的。

有的组件 可以直接拿到组件的名字就可以使用，有的组件就需要父子传值操作。
黄是购物车 需要发ajax  只能用不能改
商品详情不需要进行 加减真正操作。
我给你一个数,后期维护 我就不管了.
这个sync就是我这个子可以改，如果不加的sync的话，就说明我这个子是不可以改的。
要慎重使用，会乱
<mi-count ：count.sync = "count" max-count= "这个是传的属性"></mi-count>
data(){
    count: count
}