Vue组件（sync语法糖）

为什么要用组件？
我们希望尽可能多的重用代码
 
组件全局注册：Vue.component('名字'，{对象})

 

 注册的组件里面包含了所有内容：数据（一定是函数，使用函数会形成闭包环境，保证了每一个组件拥有独立得数据），模板，方法

 

组件注册注意事项

1 data必须是一个函数

2 组件模板内容必须有单个根元素

3 组件模板内容可以是模板字符串

 

注意：如果采用驼峰命名，只能在字符串中使用驼峰样式的名字，如果在普通模板中只能转化为短横线的方式，如下图：

 

 

 

局部注册：

 

 局部注册的东西只能在注册他的父组件中使用，其他地方不行

 
组件传值
 父组件向子组件传值：
 如下，都是以属性的方式传值，分为静态传值和动态传值，静态不加冒号，动态加冒号。
父组件：

 子组件通过props: [ ] 接收

子组件：

 

 完整演示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<zu-jian title='静态传值' :name='msg'></zu-jian>
</div>
</body>
<script type="text/javascript">
Vue.component('zu-jian', {
props: ['title', 'name'],
template:`
<div>
{{title}}----
{{name}}
</div>
`
})
var vm = new Vue({
el: '#app',
data: {
msg: '动态传值'
}
})
</script>
</html>

 props类型为数值与布尔时，如果不加不用v-bind(也就是不加：)做绑定，得到的都是字符串。

 
 props传递是单向的，只用于父传值给子
 
 子组件像父组件传数据
 子组件需要触发一个自定义事件，父组件同时需要监听自定义事件，当子组件触发时，父组件监听到就会执行相应的动作。
子组件：@click=$emit("自定义事件名", 参数 )
父组件 : @自定义事件名 = 自定义函数名($event)
父组件的methons :{ 自定义函数名: function(val) { val就是传递过来的值} }
【$emit 与 $event 是固定的写法，不管你传递的时候有多少个参数，接收时都是$event , 然后函数中的形参也是一个】
【如果子组件传递有多个参数，就用对象的形式包起来。父组件接收时的形参也是单个参数，通过 .  的形式调用，例如：val.id , val.name】
一句话总结：点击触发$emit方法,并且携带参数,参数名称就是自定义事件,这个事件会传递给父组件,父组件用@监听一下
 
sync语法糖：
当遇到上面情况，子组件想改变父组件中的值，可以直接写成：
子组件中写成：this.$emit("'update:visable', false")      ------ visable是父组件中的值'update:visable'是固定写法，传false过去
父组件中写成：:visable.sync = "visable"
总结：这样写虽然子组件看不出简化，但是使用父组件的人就用得很爽，不需要再@自定义事件名 = 自定义函数名($event),然后再父组件的methons去改变这个值
 
兄弟组件传值（非父子组件传值）： https://www.bilibili.com/video/BV1vE411871g?p=63
 
组件插槽
就是可以往组件标签的中间放一些自己写的东西

最终模板会显示：

ERROR: 有bug发生
ERROR: 有一个警告
 
作用域插槽：
作用：父组件对子组件内容进行加工处理
如果正常情况下显示：

 

 现在要求对子组件的第二个li显示为蓝色。这时就用到了作用域插槽。

 

 通过slot传值，父组件通过template中的slot-scope接收。这下面的{{item.name}}可删可不删。

 

posted @ 2020-09-03 22:21  登峰至极  阅读(750)  评论(0)  编辑  收藏  举报