vue笔记（4）全局组件和数据传递

配置插件↓ @后自动显示src中的路径 需直接打开项目 （不含多个项目）

        

"path-autocomplete.extensionOnImport": true,

"path-autocomplete.pathMappings": {

"@":"${folder}/src"

},复制到seeting.js中最上边即可

注册全局组件 main.js中

import left from '@/components/left.vue'

Vue.component('left',left)

私有注册

import left from '@/components/left.vue'

import right from '@/components/right.vue'

export default {

  components: {

    left,//"left":left 可简写为left

    right

},}

添加事件时若只有一行代码可简写为↓

      <button @click='count+=1'>+1</button>

props自定义属性  可实现不同界面同一个标签不同值

props可定义类型

<p>count 的值是{{count}}</p>
      <button @click='count+=1'>+1</button>
export default {
 数组类型：props:['init'],   props中的值是'只读的'  不能直接修改  可以吧值转存到data中 无法赋初值
集合类型:props:{
init:{
        default:0, 可用default：赋初值 
        type: Number  定义类型 只能接受数字型 别的会报错
        required:true  必须赋初值
    }
}   
data(){
    return {
        count : this.init        
}}}

调用赋初值     <count :init='3'></count> 数值3
              <count init='3'></count>  字符串3
              <count :msg='message'></count>  传递变量要加 : 

当props 中定义的属性接收的是一个复杂对象时如 info:{ name：'zs',age:18}, 会接受info的引用 修改 其中的值 info中的值也会改变

父 vue 
 <son :msg='message' :str='info'></son>

data(){
        return {
            message:'你好',
            info:{
                name:'zs',
                age:18
            }}}
子 vue
 <h3> msg:{{msg}}</h3>
      <h3>num:{{str}}</h3>
      <button @click='str.name="ls"'>11</button>
export default {
    props:['msg','str'],
}

防止多个.vue文件样式冲突 scoped

<style lang="less" scoped>  加一个scoped 会自动为每个标签添加一个[数字]
想在父页面中修改子页面内容
// 当使用第三方组件库的时候，如果有修改第三方组件默认样式的需求，需要用到 /deep/
/deep/ 标签名如 h3,h5
</style>

生命周期
created(){}   页面尚未生成  props/data/methods已创建好可用

created() {
    // created 生命周期函数，非常常用。
    // 经常在它里面，调用 methods 中的方法，请求服务器的数据。
    // 并且，把请求到的数据，转存到 data 中，供 template 模板渲染的时候使用！
    this.initBookList()    this.可调用methods  data  props等 
  }

Mounted（）  已经把html结构渲染到浏览器中  DOM已经生成 

updated  （）// 当数据变化之后，为了能够操作到最新的 DOM 结构，必须把代码写到 updated 生命周期函数中

beforeDestroy （）将要销毁此组件如(v-if) 尚未销毁

父向子共享数据  自定义属性props vue3.0

父向子孙共享数据 provide() 

父 
provide(){
  return{
    color:'blue'
  }
},
子  孙
inject:['color']   

父向子孙共享响应式数据 provide() 

父
import {computed} from 'vue'   
data(){
  return {
      red: 'red',
  }},
provide(){
  return {
    color:computed(()=>this.red)
    }}
子   孙
inject:['color']
向外展示应为 color.value     应为color值为 "red"是个字符串

子组件向父组件共享数据  自定义事件

方法名可随意定义  
子组件  
<div>
    <p>{{count}}</p>  将count 渲染到页面
    <button @click='add'>+1</button>   添加点击事件
</div>
data(){
    return {count:1}
},
methods:{
    add(){
       this.count+=1
        this.$emit('numchange',this.count) numchange 可随意定义 方法名
}
}
父组件
<div>
    <p>{{countfromson}}</p>  将countfromson 渲染到页面
    <son @changenum='newcount'></son>
</div>
data(){
    return {countfromson:0}
},
methods:{
    newcount(val){ val==子组件中传递来的count值
    this.countfromson=val   将count的值赋给countfromson 
}
}

兄弟组件数据共享 EventBus