vue 组件

时间 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真的好多好多看完是不太可能了 具体用到具体在查吧