Vue2.0基本用法之组件的注册和传值(父子props，插槽，$emit)和学写购物车

1.Vue2.0的组件注册

组件可以是全局注册和局部注册，全局注册的组件是在其他组件里也可以使用

而局部注册的组件只能在该组件里面使用。

<body><div id="app"><!-- 全局注册组件：可以在其他组件使用， --><!-- 使用组件 --><input-box></input-box><input-box></input-box><com1></com1><!-- 局部注册组件：只能在该组件里面使用， --></div>
</body>
<script src="../vue.js"></script>
<script>// 全局注册组件 参数一组件名字，参数二组件的配置属性Vue.component("inputBox", {//组件模板配置//1.有且只有一个根节点template: `<div>{{age}}</div>`,//非根组件data是一个函数，在函数里面return一个对象//因为非根组件可以重复利用 然后data要返回的是新的对象data() {return {age: 10}},methods: {},})var app = new Vue({el: "#app",data: {},//本组件里面需要使用的其他组件//定义一些局部的组件components: {com1: {template: `<p>你好{{age}}</p>`,data() {return {age: 10}}}}})
</script>

2.组件之间的传值

先总结后一个一个学下面都有

1.父传子:
一.props属性传值
（1）在子组件的对象中通过props字段添加自定义属性
{
props:['myData']
}
(2)在子组件的标签中通过v-bind把自定义属性赋值为父组件的动态数据
<my-com :my-data="name"></my-com> //name是根组件的data数据
(3)在子组件模板中，使用自定义属性渲染数据
二.slot插槽进行传值
1.在子组件标签中直接写父组件的动态数据
<my-com>{{name}}</my-com>
2. 在子组件模板中使用slot标签渲染子组件标签中的插槽数据
子组件显示:<slot></slot>

2.子传父
$emit函数进行传值
1.在子组件合适位置通过this.$emit函数发送自定义事件，把数据发送出去
this.$emit('myevent',this.data || 函数的形参)
2.在子组件标签上通过v-on 或者 @ 来绑定 myevent => @myevent
<my-com @myevent="里面是你的根组件的一个获得这个参数的事件函数"><my-com>
3.在父组件中
getData(data)
{
this.fatherData = data
}

3.非父子: bus总线进行传值
1.在全局作用域中创建个空的Vue对象，称之为总线bus
    var bus = new Vue()
2.在一个组件中合适的位置，通过bus总线调用$emit发送数据
bus.$emit("myevent",value)
3.在另一个组件中的初始化函数created中，使用bus总线监听事件
created(){
      bus.$on("myevent",(data)=>{
          this.name= data //注意要用箭头函数this指向上下文的this
      })
}

2.1父子组件的传值

（1）父传子：一.props字段通过自定义属性进行传值

                     1.在父组件使用子组件的时候，给子组件添加自定义属性，属性值为传递的数据
                       2.在子组件使用props接收父组件的数据，props值是数组，元素是自定义属性
                   3.使用的时候像data数据一样进行使用，props字段。

二.slot插槽进行传值

1.默认插槽

<body><div id="app"><!-- slot插槽：把组件内容区域进行划分，一个组件内容区域要显示在组件结构的哪个区域，通过slot指定显示 --><!-- 如果slot没有名字默认插槽,组件内容显示默认插槽中 --><com2><com1>我是一个错误<div>传递一个html标签结构</div></com1></com2></div><template id="tem1"><div><strong>错误：</strong><slot></slot></div>
</template><template id="tem2"><div>你好<slot></slot></div>
</template>
</body>
<script src="../../../vue.js"></script>
<script>Vue.component('com1', {template: "#tem1",})Vue.component("com2", {template: "#tem2"})var app = new Vue({el: "#app",data: {}})
</script>

2.具名插槽

<body><div id="app"><page><!-- 第一种写法 --><!-- <h1 slot="header">页面头部</h1> <h2 slot="main">我是真的累啊!</h2><h3 slot="footer">我是脚</h3><h4>我显示在哪里?</h4>  --><!-- 第二种写法 v-slot指令指定组件内容显示对应的slot里面,配合template标签--><!-- <template v-slot:footer><h1>这个是页面尾部</h1></template><template v-slot:main><h1>这个是页面内容区域</h1></template><template v-slot:header><h1>这个是页面内容头部</h1></template> --><!-- 第三种写法 --><template #footer>尾部</template><template #main>用#来表示的内容</template><template #header>用#来表示的头部</template></page></div><!-- 在组件使用slot标签的时候添加name字段  在组件内容区域可以给标签添加slot属性,属性值为slot的name属性值,这时候就会指定在对应插槽里面显示组件内容--><template id="tem1"><div class="container"><slot></slot> <header style="border: 10px yellow solid; "><slot name="header"></slot></header><main style="border: 10px red solid;"><slot name="main"></slot></main><footer style="border:  green 10px solid;"><slot name="footer"></slot></footer></div></template>
</body>
<script src="../../vue.js"></script>
<script>Vue.component('page', {el: "#tem1",})var app = new Vue({el: "#app",})
</script>

3.插槽传值

<body><div id="app">{{ msg}}<!-- 插槽传值:插槽作用域传值,给组件添加一个v-slot属性,属性值为slot插槽的name值,传递过来使用内置对象来接收slotProps --><child v-slot:header="slotProps"><p>{{slotProps.abc}}</p><p>{{slotProps.def}}++++{{msg}}</p></child></div>
</body>
<script src="../../vue.js"></script>
<script>Vue.component("child", {template: `<div><slot name="header" :abc="msg" :def="msg2"></slot></div>`,//为什么非根组件的data是函数? 有什么区别与根组件//每次使用子组件的时候data都是通过函数进行返回的,每次data都是一个独立作用域,//所以每次data就是唯一的datadata() {return {msg: "child-data",msg2: "child-data2"}},})var app = new Vue({el: "#app",data: {msg: "你好"}})
</script>

(2) 子传父：

组件只能使用本组件的数据，修改一个数据也只能在本组件里面进行修改

父组件数据传递子组件，但是修改父组件的时候，只能回到父组件进行修改

<body><div id="app">{{msg}}<!-- 状态提升 ：算是写代码的规范 把原本定义在子组件的数据，放在父组件来进行定义，以后每个子组件来去公用这个数据的时候可以把数据传递每个子组件，每个子组件去修改的时候，可以通过调用父组件的方法来进行修改--><!-- 1.在父组件定义修改方法，需要传递参数2.在使用子组件的时候通过自定义事件$emit来绑定修改方法3.在子组件里面在需要的地方通过this.$emit("事件名",传递参数)进行触发事件并且传递参数--><!-- @pass 自定义事件，不要和vue提供的事件重名 --><com :n="msg" @pass="changeMsg"></com></div><template id="tem"><div><p>{{n}}</p><button @click="changen($event,1)">+</button>  <button @click="changen($event,-1)">-</button>  </div></template>
</body>
<script src="../../vue.js"></script>
<script>Vue.component('com', {template: "#tem",data() {return {}},props: ['n'],methods: {changen(e, n) {//不能直接修改父组件传递过来的数据//事件发射：触发pass事件，传递参数this.$emit('pass', [e, n])}},})var app = new Vue({el: '#app',data: {msg: 10},methods: {changeMsg(v) {console.log(v);this.msg += v[1]}},})
</script>

（3）非父子之间的传值

01-bus总线传值

<body><div id="app"><com1></com1><com2></com2></div><!-- 组件1 com1 --><template id="tem1"><div></div></template><!-- 组件2 com2 --><template id="tem2"><div>{{com2Msg}}</div></template>
</body>
<script src="../../vue.js"></script>
<script>var bus = new Vue()/*总线本质就是一个空组件,可以通过总线进行事件发射,也可以在总线上进行事件监听监听事件触发之后,可以在回调函数取出传递的值*/Vue.component('com1', {template: '#tem1',data() {return {com1Msg: "你好哦!"}},mounted() {//在总线上来进行传值setTimeout(() => {// 先绑定 后触发  所以要先用$on 绑定上去 bus.$emit('send', this.com1Msg)}, 10);},})Vue.component('com2', {template: '#tem2',data() {return {com2Msg: ""}},mounted() {//bus.$on()参数一是事件接收,参数二是回调bus.$on('send', e => {this.com2Msg = econsole.log(this.com2Msg);})},})var app = new Vue({el: "#app",data: {}})
</script>

以下是vue2.0用我所学的上述和上次的知识所写的购物车大家可以写写

给你们.json文件的代码

[{"Id": 211,"title": "可乐调味红茶","price": "99","mack": "<span style=\"color: #FB4C81;background: ; border-color: #FB4C81\">一起拼</span>","nice": "3","img_list_url": "http://bfs.biyao.com/group1/M00/D1/04/rBACW1zT0oWAE5beAACdS5_pWRk551.jpg","type_one": "饮食","type_two": "茗茶"},{"Id": 212,"title": "晓斗大树生普（雅）","price": "568","mack": "<span style=\"color: #FB4C81;background: ; border-color: #FB4C81\">一起拼</span>","nice": "30","img_list_url": "http://bfs.biyao.com/group1/M00/53/4A/rBACYVuIw8KAGAYOAABL4RZDoMM205.jpg","type_one": "饮食","type_two": "茗茶"},{"Id": 213,"title": "晓斗大树散生普（甘棠）","price": "97","mack": "<span style=\"color: #FB4C81;background: ; border-color: #FB4C81\">一起拼</span>","nice": "7","img_list_url": "http://bfs.biyao.com/group1/M00/6B/8B/rBACYVvmkLSAf_5PAABqwcqdgZI251.jpg","type_one": "饮食","type_two": "茗茶"},{"Id": 214,"title": "雪梨罗汉果水果果茶","price": "99","mack": "<span style=\"color: #FB4C81;background: ; border-color: #FB4C81\">一起拼</span>","nice": "19","img_list_url": "http://bfs.biyao.com/group1/M00/DE/D8/rBACVFznaXqAC0ZrAACfEp2WNuU850.jpg","type_one": "饮食","type_two": "花茶/果茶"},{"Id": 215,"title": "茉莉花茶","price": "139","mack": "<span style=\"color: #FB4C81;background: ; border-color: #FB4C81\">一起拼</span>","nice": "53","img_list_url": "http://bfs.biyao.com/group1/M00/CC/BC/rBACYVzOpVCAJpVpAACe6JQngaA345.jpg","type_one": "饮食","type_two": "花茶/果茶"},{"Id": 216,"title": "好喝好吃水果果茶 260g","price": "95","mack": "<span style=\"color: #FB4C81;background: ; border-color: #FB4C81\">一起拼</span>","nice": "23","img_list_url": "http://bfs.biyao.com/group1/M00/AF/31/rBACVFybKQGADs4wAACfGefg12c880.jpg","type_one": "饮食","type_two": "花茶/果茶"},{"Id": 217,"title": "水果果茶组合装","price": "239","mack": "<span style=\"color: #FB4C81;background: ; border-color: #FB4C81\">一起拼</span>","nice": "4","img_list_url": "http://bfs.biyao.com/group1/M00/F2/D4/rBACW10AWaKANbcDAACfnJTXH30091.jpg","type_one": "饮食","type_two": "花茶/果茶"},{"Id": 218,"title": "草莓猕猴桃水果果茶","price": "118","mack": "<span style=\"color: #FB4C81;background: ; border-color: #FB4C81\">一起拼</span>","nice": "12","img_list_url": "http://bfs.biyao.com/group1/M00/BE/56/rBACYVy1XKqAQ0AnAACcv7QxO7k558.jpg","type_one": "饮食","type_two": "花茶/果茶"},{"Id": 219,"title": "奶油红草莓水果果茶","price": "89","mack": "<span style=\"color: #FB4C81;background: ; border-color: #FB4C81\">一起拼</span>","nice": "28","img_list_url": "http://bfs.biyao.com/group1/M00/BC/9A/rBACVFy1XH2AHRb8AACcwH03vmI065.jpg","type_one": "饮食","type_two": "花茶/果茶"},{"Id": 220,"title": "热带水果之吻水果果茶","price": "118","mack": "<span style=\"color: #FB4C81;background: ; border-color: #FB4C81\">一起拼</span>","nice": null,"img_list_url": "http://bfs.biyao.com/group1/M00/BE/52/rBACW1y1WiiAbUSMAACewW2z7mw384.jpg","type_one": "饮食","type_two": "花茶/果茶"},{"Id": 221,"title": "奶油乌龙茶","price": "118","mack": "<span style=\"color: #FB4C81;background: ; border-color: #FB4C81\">一起拼</span>","nice": "5","img_list_url": "http://bfs.biyao.com/group1/M00/BE/56/rBACYVy1XPaAeM_FAACZpWOtSsI323.jpg","type_one": "饮食","type_two": "花茶/果茶"},{"Id": 222,"title": "桂花红茶饼干礼盒 147g","price": "339","mack": "<span style=\"color: #FB4C81;background: ; border-color: #FB4C81\">一起拼</span>","nice": "7","img_list_url": "http://bfs.biyao.com/group1/M00/93/1F/rBACW1xGzgGATx4DAACbfgyZMug423.jpg","type_one": "饮食","type_two": "花茶/果茶"},{"Id": 223,"title": "阳光香橙冰爽茶","price": "118","mack": "<span style=\"color: #FB4C81;background: ; border-color: #FB4C81\">一起拼</span>","nice": "6","img_list_url": "http://bfs.biyao.com/group1/M00/C8/46/rBACYVzIMFmAV9ZeAACdtiKQxNg165.jpg","type_one": "饮食","type_two": "花茶/果茶"},{"Id": 224,"title": "热带风情无花果椰果果茶","price": "90","mack": "<span style=\"color: #FB4C81;background: ; border-color: #FB4C81\">一起拼</span>","nice": "2","img_list_url": "http://bfs.biyao.com/group1/M00/BC/98/rBACVFy1Wb2APIAZAACdaaCqtjg126.jpg","type_one": "饮食","type_two": "花茶/果茶"},{"Id": 225,"title": "黄金菠萝蜜瓜水果果茶","price": "90","mack": "<span style=\"color: #FB4C81;background: ; border-color: #FB4C81\">一起拼</span>","nice": "1","img_list_url": "http://bfs.biyao.com/group1/M00/BC/98/rBACVFy1WaiAL00AAACdEZhO_bk474.jpg","type_one": "饮食","type_two": "花茶/果茶"},{"Id": 226,"title": "抹茶甜甜圈水果果茶","price": "118","mack": "<span style=\"color: #FB4C81;background: ; border-color: #FB4C81\">一起拼</span>","nice": null,"img_list_url": "http://bfs.biyao.com/group1/M00/BE/56/rBACYVy1XQyAMkKtAACS3H4JoLI951.jpg","type_one": "饮食","type_two": "花茶/果茶"},{"Id": 227,"title": "路易波斯原味甄选","price": "90","mack": "<span style=\"color: #FB4C81;background: ; border-color: #FB4C81\">一起拼</span>","nice": "8","img_list_url": "http://bfs.biyao.com/group1/M00/C8/43/rBACW1zIMEiAb8uWAACc4LIHqTo099.jpg","type_one": "饮食","type_two": "花茶/果茶"},{"Id": 228,"title": "石榴柠檬水果果茶","price": "89","mack": "<span style=\"color: #FB4C81;background: ; border-color: #FB4C81\">一起拼</span>","nice": "2","img_list_url": "http://bfs.biyao.com/group1/M00/E0/94/rBACW1znbBSAfLsqAACVBYs_v4A285.jpg","type_one": "饮食","type_two": "花茶/果茶"},{"Id": 229,"title": "玫瑰红茶饼干礼盒 147g","price": "339","mack": "<span style=\"color: #FB4C81;background: ; border-color: #FB4C81\">一起拼</span>","nice": "7","img_list_url": "http://bfs.biyao.com/group1/M00/93/19/rBACYVxGz2GAcn33AACV0wNyUec569.jpg","type_one": "饮食","type_two": "花茶/果茶"},{"Id": 230,"title": "丝滑拿铁路易博斯","price": "128","mack": "<span style=\"color: #FB4C81;background: ; border-color: #FB4C81\">一起拼</span>","nice": "8","img_list_url": "http://bfs.biyao.com/group1/M00/BE/54/rBACW1y1XJeAV4ofAACIxa3Un6M997.jpg","type_one": "饮食","type_two": "花茶/果茶"},{"Id": 231,"title": "香橙花园水果茶","price": "118","mack": "<span style=\"color: #FB4C81;background: ; border-color: #FB4C81\">一起拼</span>","nice": "4","img_list_url": "http://bfs.biyao.com/group1/M00/C6/8B/rBACVFzIMDOACH2RAACeB5aKMUY060.jpg","type_one": "饮食","type_two": "花茶/果茶"},{"Id": 232,"title": "奶油蜜桃水果果茶","price": "118","mack": "<span style=\"color: #FB4C81;background: ; border-color: #FB4C81\">一起拼</span>","nice": "1","img_list_url": "http://bfs.biyao.com/group1/M00/9E/51/rBACW1xuzlyAa3HTAACd2HKlZrA635.jpg","type_one": "饮食","type_two": "花茶/果茶"},{"Id": 233,"title": "森林红果之鸡尾酒水果茶","price": "118","mack": "<span style=\"color: #FB4C81;background: ; border-color: #FB4C81\">一起拼</span>","nice": "2","img_list_url": "http://bfs.biyao.com/group1/M00/BE/54/rBACYVy1WdOAbLPSAACc3676Ksg767.jpg","type_one": "饮食","type_two": "花茶/果茶"},{"Id": 234,"title": "苹果黑加仑水果果茶","price": "89","mack": "<span style=\"color: #FB4C81;background: ; border-color: #FB4C81\">一起拼</span>","nice": "10","img_list_url": "http://bfs.biyao.com/group1/M00/BE/54/rBACW1y1XNqAN8gKAACZjC2Bu-k678.jpg","type_one": "饮食","type_two": "花茶/果茶"},{"Id": 235,"title": "樱花风味调味红茶","price": "89","mack": "<span style=\"color: #FB4C81;background: ; border-color: #FB4C81\">一起拼</span>","nice": "2","img_list_url": "http://bfs.biyao.com/group1/M00/C8/45/rBACW1zIMmqAGpH8AACYu59U2YA363.jpg","type_one": "饮食","type_two": "花茶/果茶"},{"Id": 236,"title": "欢乐马戏水果果茶","price": "118","mack": "<span style=\"color: #FB4C81;background: ; border-color: #FB4C81\">一起拼</span>","nice": "2","img_list_url": "http://bfs.biyao.com/group1/M00/BE/53/rBACYVy1WZGAGgUPAACeecKftpc564.jpg","type_one": "饮食","type_two": "花茶/果茶"},{"Id": 237,"title": "南国芒果金色时代","price": "118","mack": "<span style=\"color: #FB4C81;background: ; border-color: #FB4C81\">一起拼</span>","nice": null,"img_list_url": "http://bfs.biyao.com/group1/M00/BC/97/rBACVFy1WXuASzy1AACb4ZqMRec614.jpg","type_one": "饮食","type_two": "花茶/果茶"},{"Id": 238,"title": "金奖即食麻辣海鲜丸4盒","price": "128","mack": "<span style=\"color: #FFFFFF;background: #AB7FD1; border-color: #AB7FD1\">精选</span>\n\t\t\t\t\t\t\t\t\t\t\t\t        \n\t\t\t\t\t\t\t\t\t\t\t\t        \t<span style=\"color: #FB4C81;background: ; border-color: #FB4C81\">一起拼</span>","nice": "2","img_list_url": "http://bfs.biyao.com/group1/M00/0B/8B/rBACYV0jAeqAZjkwAACarhGP8Ek469.jpg","type_one": "正餐","type_two": "川湘菜"},{"Id": 239,"title": "即食八爪扇贝鱿鱼【4盒】","price": "149","mack": "<span style=\"color: #FFFFFF;background: #AB7FD1; border-color: #AB7FD1\">精选</span>\n\t\t\t\t\t\t\t\t\t\t\t\t        \n\t\t\t\t\t\t\t\t\t\t\t\t        \t<span style=\"color: #FB4C81;background: ; border-color: #FB4C81\">一起拼</span>","nice": "547","img_list_url": "http://bfs.biyao.com/group1/M00/9E/2B/rBACW1xuagGAMXx0AACb0abNWfs776.jpg","type_one": "正餐","type_two": "川湘菜"},{"Id": 240,"title": "即食麻辣鲍鱼【4盒32只】","price": "196","mack": "<span style=\"color: #FB4C81;background: ; border-color: #FB4C81\">一起拼</span>","nice": "129","img_list_url": "http://bfs.biyao.com/group1/M00/DD/2D/rBACW1zjY-qAJKRRAACD8kIAPYc976.jpg","type_one": "正餐","type_two": "川湘菜"}
]