输入
技术胖视频1-4季
总记不太住的
- 模板的使用，template
- component 的注册、传值、父子组件
- methods中的 $event
- nextTick 使用是在 哪一步前，哪一步后？
- 内置组件slot的使用
输出
代码
代码收录在GitHub, 2 34文件夹下面，本文代码
笔记
-
template 使用
三种写法
哪三种写法？
1.直接在实例里面写的var app = new Vue({ el: '#app', data: { cents: 20000 }, template: '<div>{{ cents }}</div>' })2.使用id绑定template 完了在data中定义的，最常用
注意，如果有template，只渲染template里面的东西 template里面必须要有 div p 这些html外层标签，渲染的时候，会去掉 template, 如果 <template> 文字</template>，要是html代码段 <template><div>balabala</div></template<div id="app"> <template id="test"> <div> {{ cents }} </div> </template> </div> <script> var app = new Vue({ el: '#app', data: { cents: 20000 }, template: '#test' }) </script>3.在script中写的，不常用，不管它
-
component使用复习
注册，全局注册、局部注册注意： 全局注册，不需要在 vue 实例中components 中声明 局部注册需要, components: {a: a}//全局注册 Vue.component('bus', { template: `<div>这是汽车组件</div>` }) var app = new Vue({ el: '#app', data: { cents: 20000 } }) // 局部注册 var bus = { template: `<div> 这是局部组件测试</div>` } var app = new Vue({ el: '#app', data: { cents: 20000 }, components: { bus: bus } })如何向组件传值, props的使用
var bus = { template: `<div> 这是组件传值测试 {{ objp.name }} 今年 {{ objp.age }}</div> `, props: ['objp'] } var app = new Vue({ el: '#app', data: { obj: { name: '迟不子', age: 18 } }, components: { bus: bus } })父子组件,
首先， 如何在实例中使用单个组件， 使用全局或者局部注册法
如何在组件使用组件？
template: '#id'
意思，模板是找 id的template// 全局注册孩子组件 // 或者使用变量定义， 用 component 引入 Vue.component('child',{ template:`<div> 我还是个宝宝</div>` }) //或者局部注册 var parent = { template: ` <div> <p> 这是组件传值测试 {{ objp.name }} 今年 {{ objp.age }} </p> <child></child> </div> `, props: ['objp'], components: { child: { template: `<div> 我还是个宝宝</div>` } } } -
$event 和调用顺序有关系吗？
没有 是鼠标事件属性 target 是实际点击元素， <span> currentTarget 是绑定click 事件的元素 sapn外面的div ``` <div id="app"> <div @click="handle(33, $event)"> <span>点击一</span> </div> <div @click="handle2( $event, 44)">点击二</div> </div> ```
4.nextTick 和 created mounted updated 顺序？ 还没弄清楚，待续
在执行， vm.person = "lisi" 后
只执行了 updated
没有执行 nextTick？
```
var vm = new Vue({
el: '#app',
data: {
person: 'zhangsan'
},
created: function(){
console.log("created", this.person);
},
mounted: function(){
console.log("mounted", this.person);
},
updated: function(){
console.log("updated", this.person);
}
})
// vm.age = "29";
vm.$nextTick(function(){
console.log('执行nextTick', this.person);
})
```5.slot 的使用
参考博客：https://www.w3cplus.com/vue/v...
几种情况：
1，如果父组件未向模板中分发内容（插入内容），则显示插槽中默认内容（前提是slot中设置了默认内容）
意思是组件里为空， 比如 <alert></alert>
template （组件）渲染成html， 是渲染template 中默认内容
2,父组件给模板分发了内容，则分发的内容会替换slot标签
意思是, 组件里面中有东西, 会替换 slot 标签中的内容，而模板中，不是slot的部分，不会被替换，还在
<alert>
<div>组件插入内容</div>
</alert>
3, 除此之外，假设模板中未设置插槽，父组件依旧向其分发了内容，但最终任何分发的内容都不会显示。
意思是，模板中没插槽，template 没slot, 父组件中仍然有 东西
组件向模板发的东西不会显示
按照插的不同有几种
1, slot 只有一处，只能往这一处插，不能往别地方插，不用名字
2, 命名插槽，slot 有多处，我们通过slot的name来区分不同的 插槽内容，然后往里面插东西
3, 作用域插槽，不管暂时用不到
这篇文章主要学习和了解了Vue中的插槽<slot>。
是一个空壳子，它显示与否以及怎么显示完全是由父组件来控制。不过，插槽显示的位置由子组件自身决定，slot写在组件template的哪块，父组件传过来的模板将来就显示在哪块
```
<div id="app">
<alert>
<div slot="header">自定义头部内容</div>
<div slot="middle">自定义中部内容</div>
</alert>
</div>
<template id="alert">
<div>
<p>我是测试用的alert模板内容</p>
<slot name="header">模板头部内容</slot>
<slot name="middle">模板中部内容</slot>
</div>
</template>
<script type="text/javascript">
Vue.component('alert', {
template: '#alert',
})
var app = new Vue({
el: '#app',
data: {
},
methods: {
handle: function(num, e) {
console.log(num, e);
console.log(e.target);
console.log(e.currentTarget);
},
handle2: function(e, num) {
console.log(e, num);
}
}
})
</script>
```