vue学习笔记（五）Vue-cli 组件嵌套,css作用域,父传值子组件

Vue-cli 组件嵌套

全局组件注册:(main.js)

import 组件名 form '位置'
vue.component("组件标签名",组件名)

只需在使用的位置调用组件标签名即可
局部组件使用:(需要使用的vue文件中)

import 组件名 form '位置'
components:{
组件标签名:组件名    //可以省略组件标签名
}

Vue-cli css作用域

<style scoped>
</style>

只需在style后添加scoped即可

父传值子组件

1.子组件在props中创建一个属性，用以接收父组件传过来的值
2.父组件中注册子组件
3.在子组件标签中添加子组件props中创建的属性,把需要传给子组件的值赋给该属性

props: {
    属性名:{
      type:数据类型(String,Number...)
    }
  }

子组件代码(第一步)

<组件标签名 :子组件props创建的属性名="父组件中值">  

父组件代码(第三步)

Vue-cli 传值和传引用

传值:String,Number,Boolean... 改变一个地方数据,其他数据不变
传引用:Array,Object 改变一个地方数据,所有跟引用相关的数据都会改变

Vue-cli 子传值父组件

1.子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
2.将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
3.在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

function(){
    this.&emit("自定义方法名","值")
}

子组件代码(第二步)

<标签名 @子组件自定义的方法名="方法名($event)" >

methods:{
  方法名:function(data){
    this.name=data
}
}