时间 16点17分
开始正式开启组件学习 兴奋
继续学习
<script>
//组件注册
//注册之前记得引入
import global_com from '文件路径'
//全局组件注册
vue.component("com",global_com) //任何子组件都能用全局注册的组件 不如button 之类的
//局部组件注册
同样是先引入
import local_com from '文件路径'
export default {
name: 'father_com',
data () {
return {
msg: null
}
},
components:{
"banner":local_com // 在模板template里就能用 <banner></banner> 标签了
}
}
</script>
//css 作用域
加上scoped 会让 标签拥有作用域且 每个标签上 增加 data-v- 数值 这个数值决定作用域
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
组件怎么传值?
组件给组件传递数据
父组件给子组件传递
传值 string number boolean
引用 obj array
props 官网介绍的挺齐全的
props 还要做类型检测
子组件向父组件传递值 官网例子 简单直接 官网链接
<blog-post v-on:enlarge-text="postFontSize += $event">
</blog-post>
<button v-on:click="$emit('enlarge-text', 0.1)">
Enlarge text
</button>
$emit // 事件 传递
$event // 值
$emit('事件','值')
父组件接收 v-on:'事件' = 函数(值)
methods 里定义 函数 然后获取 值 之后做相应处理 我是这么理解的不知有错么
生命周期
这是一个比较重要的点 在实例化之前 如果有请求跟交互要做 可以写在实例化之前
看着就比骄好理解
api真的好多好多看完是不太可能了 具体用到具体在查吧
网友评论