vue组件传值详解

父组件向子组件传递数据 1.props 2.$parent

//父组件
<template>
 <div>
 
 <child :fatherdatas="parentdata"></child>

 </div>
</template>

<script>
import child from './child.vue' 
    export default {
        name:'parent',
        components:{
            child
        },
        data(){
            return{
                parentdata:"This is the first word from parent"
            }
        }
    }

</script>

//子组件
<template>
    <div>
        {{fatherdatas}}
    </div>
</template>

<script>
    export default {
        name:"child",
        props:{
            fatherdatas:{
                type:String,
                default:"3"
            }
        },

        created()
        {
            console.log(this.fatherdatas)
        }
       
    }
    </script>

props是单向的， 使用props在子组件中声明从父组件传过来并且需要接收的每个属性
props声明的数据，在组件中中当作一个变量数据来使用就好
当父组件更新属性时，属性向下流动到子组件。反过来却不行，这样可以防止子组件意外的改变父组件的状态/属性，如果改变状态，将在控制台看见错误警告信息

vue组件props对象写法
写法一：
props:[‘num’,‘isShow’]
写法二：
props:{
num: number,
isShow: Boolean
}
写法三：
props:{
num:{
require: true, /// 规定num属性是必传项，所以在调用子组件时候必传 否则报错
type: number
},
isShow:{
type: Boolean,
default: false
}
}

单文件组件：
.vue文件，称为单文件组件，单文件组件将所有模板和脚本信息组合成一个.vue文件，每个组件都有自己的作用域，是Vue.js自定义的一种文件格式，一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：html、css、js
.vue文件由三部分组成：<template>、<style>、<script>
一个组件有很多种定义和使用模板字符串的方法，但对于大的程序来说适合使用单文件组件

要使用单文件组件，你必须熟悉几种现代构建工具，比如webpack或browserify等, 它可以构建.vue代码。vue.js使用自己的脚手架生成器vue-CLI简化了过程，脚手架已经包含了所有必要的构建工具。

vue-loader：
浏览器本身并不认为.vue文件，所以必须对.vue文件进行加载解析，此时需要vue-loader，类似的loader还有许多，如：html-loader、css-loader、style-loader、babel-loader等需要注意的是vue-loader是基于webpack的

webpack是一个前端资源模板化加载器和打包工具，它能够把各种资源都作为模块来使用和处理。实际上，webpack是通过不同的loader将这些资源加载后打包，然后输出打包后文件
简单来说，webpack就是一个模块加载器，所有资源都可以作为模块来加载，最后打包输出
webpack有一个核心配置文件：webpack.config.js，必须放在项目根目录下

子组件向父组件传递数据 1. $emit 2. $children 3.ref

emit使用方法
this.$emit(‘自定义事件名’,所需要传的值，所需要传的值…)

首先在子组件中定义一个事件，并且使用emit发送给父组件，在示例中子组件使用的click事件触发发送自定义事件(childmsgshow)

// 子组件
<template>
    <div>
    <button @click="childmsgshow">dianji</button>
    </div>
</template>

<script>
    export default {
        name:"child",
        props:{
            parentdatas:{
                type:String,
                default:"5"             
            }
        },
        data(){
          return  {
              msg:"sxc",
              age:20

            }
        },
        methods:{
            childmsgshow(){
                this.$emit("sendmsgfat",this.msg,this.age)
            }
        }
       
    }
</script>

在父组件中需要定义方法(getsendmsg)接受自定义事件(sendmsgfat)

//父组件
<template>
 <div>
 
 <child :fatherdatas="parentdata" @sendmsgfat="getsendmsg"></child>

 </div>
</template>

<script>
import child from './child.vue' 
    export default {
        name:'parent',
        components:{
            child
        },
        data(){
            return{
                parentdata:"This is the first word from parent"
            }
        },
        methods:{
            getsendmsg(val,val2)
            {
                console.log(val)
                console.log(val2)
            }
        }
    }

</script>

$children / $parent
// $children 在父组件中打印子组件的值，相当于子组件向父组件传值
// $parent 在子组件中打印父组件的值，相当于父组件向子组件传值

//子组件
<template>
    <div>
    <button @click="childmsgshow">dianji</button>
    </div>
</template>

<script>
    export default {
        name:"child",
        props:{
            parentdatas:{
                type:String,
                default:"5"
                
            }
        },
        data(){
          return  {
              msg:"sxc",
              age:20,
              sex:"男"

            }
        },
        methods:{
            childmsgshow(){
                this.$emit("sendmsgfat",this.msg,this.age)
            }
        }，
         mounted(){
          console.log(this.$parent)
            console.log(this.$parent.parentdata)
        }
       
    }
</script>

//父组件
<template>
 <div>
 
 <child :fatherdatas="parentdata" @sendmsgfat="getsendmsg"></child>

 </div>
</template>

<script>
import child from './child.vue' 
    export default {
        name:'parent',
        components:{
            child
        },
        data(){
            return{
                parentdata:"This is the first word from parent"
            }
        },
        methods:{
            getsendmsg(val,val2)
            {
                console.log(val)
                console.log(val2)
            }
        },
        mounted(){
            console.log(this.$children) //$children 一个子组件的对象，包含子组件的所有属性
             console.log(this.$children[0].msg)
        },
        created(){
            //这里拿不到数据
        console.log(this.$children)
         console.log(this.$children[0].msg)
          
        }
        

    }

</script>

这种方法不仅可以调用数据，也可以使用子组件的方法
如果是子组件使用父组件的数据，可以同样的流程

ref
ref可以让父组件更加便利地取到想要的子组件的值，其中原理和 $children / $parent相同，都是取到组件对象

在父组件中定义ref <child ref="childselected"></child>
在父组件中取值：

   mounted(){
             console.log(  this.$refs.childselected.msg)
        },

何为ref?
1、vue自带的获取DOM的方法，它不仅可以获取DOM元素还可以获取组件。
2、给dom节点记上ref属性，可以理解为给dom节点起了个名字。
3、加上ref之后，在$refs属性中多了对这个元素的引用。
4、通过vue实例的$refs属性拿到这个dom元素。

父子组件传值总结 ：

props/$emit
子组件通过props接收父组件的值
父组件通过接收子组件的emit发送的自定义事件接收子组件的值
$parent/children
直接获取组件对象来取值
$ref
定义ref对应的属性名来获取组件对象再来取值

终极方法
使用状态管理工具,例如Vuex

父子/兄弟/跨级组件传值总结

父子：
1.props和$mit
2.$parent,$root, $chidren（$root 和 $parent 都能够实现访问父组件的属性和方法，两者的区别在于，如果存在多级子组件，通过parent 访问得到的是它最近一级的父组件，通过root 访问得到的是根父组件(App.vue) 所以存在组件嵌套的情况下 不要使用 $root）
3.$refs


父子/兄弟/跨级：
1.vuex
2.事件总线(eventBus)   
3.mitt 或 tiny-emitter(vue3推荐使用的一些第三方库 )
4.provide和inject （依赖注入）
5.$attrs、$listeners（$attrs 与 $listeners 是两个对象，$attrs 里存放的是父组件中绑定的非 Props 属性，$listeners里存放的是父组件中绑定的非原生事件（即自定义事件）。）

普通的emit只能从子组件传到父组件，通过$listeners，我们可以实现从孙子组件把事件传到父子组件，不需要通过emit逐层传递。
$attrs和$listeners主要用来父孙组件之间传值，有的同学说也可以用provide和inject来实现父孙组件之间传值，但需要注意的是provide和inject只能从父组件向孙组件传值，不能从孙组件向父组件传值，这种情况就需要使用$attrs和$listeners来实现了。