组件传值

16. 在 vue中 获取到dom元素 使用 ref 属性

在vue中提供了 一个属性 ref 属性 可以获取元素的DOM元素也可以获取组件

 - 16.1  模板中 给元素添加 ref 属性  比如  <div ref="box"> </div>
         组件也是可以添加 ref  <Home ref="box" />
 - 16.2   this.$refs.box 即可获取到 DOM 元素 

17. 组件传值之父-->子

• 17.1 在父组件 中传数据 <Parent name="XXXXX"/>

• 17.2 在子组件 中收数据 props:["name"] 然后就可以在模板中使用了

• 注意点 1. 使用 v-bingd 传递数据 比如 :age="" 引号中间的内容就是一个表达式 不是简单字符串

• 注意点 2. props:{name:Number } 限制传过来的数据类型

• 注意点 3.
  // 限制类型 和是否必须要传数据 和默认值 限制更多
  // require 和 default 不同时添加
  props:{
  name:{
  type:String, // 类型必须是字符串类型
  required:true // 必须要传递 必须参数

            },
        age:{
            type:Number, // 类型是 数值类型
            default:19   // 如果不传数据 默认就是 19 
        }
  
            },
  

• 注意点4 不要直接修改 父组件传递过来的数据 可以在子组件用一个数据接收

• 注意点5 props 和 子组件数据名称冲突时 props传递的数据优先级更高

18. mixin: 可以将多个组件共用的配置提取出来 成为一个混入对象

- 1 在src目录下写一个mixin.js  
   <!-- 分别导出 -->
  export const haha = {
     data(){
       return {
         name:"张三"
       }
     }
  }
- 2  局部 在组件中  import {haha} from '../mixin'  添加 mixins:["haha"]
     全局 在 main.js中  import {haha} from '../mixin'   添加 Vue.mixin(haha)

19. 样式冲突 当多个组件使用的是同一个 class名或id名是 出现样式冲突的现象
    scoped 作用域的意思 表示 当前样式只针对当前 组件
    原因是添加了一个自定义属性