Vue【组件传值1（父子、子父、祖孙、兄弟）】

其他传值方法见2
参考链接

父子传值

 子组件可以通过props接受子组件的属性从而拿到属性值
之后可以在页面中直接使用该属性来渲染属性值
props的值可以是一个数组 它里面可以是该组件所有属性的集合
组件标签上绑定的属性是 title-text 接收属性的时候要改成驼峰命名 titleText
使用下划线和小写命名的属性可以随意
props: ['content', 'titleText'],
props也可以是一个对象在对象中接受自定义属性 可以规定数据的类型和默认值 定义数据是否是必须要传递的

props: { // 默认值是在传递的数据的值是undefined的时候会生效或者没有传递该属性的时候也会生效
        content: {
          type: String,
          required: true, // props配置了必传 则在组件上面就必须有该属性
          default: "进可孤身一挑五"
        },
        pres: {
          type: Array,
          default: () => { // props给数组和对象设置默认值的时候需要使用函数返回默认值
            return []
          }
        }
      },
 
  <!-- 可以通过自定义属性将父组件的数据绑定在要使用该数据的子组件标签上 -->
   <parent content="123" title-text="去你的把" :pres="arr"></parent>
   <!-- 不能驼峰命名自定义属性 因为识别不了 -->

第二种可以接收值的方法

在子组件中使用this.$parent可以直接使用父组件的值
孙级组件可以通过this.$parent.$parent来使孙级组件使用爷级组件的值

第三种可以接收值的方法

// provide开发组件库或者高阶组件的时候使用的方法
在父组件中写这个
      provide: {
        text: "你们是麻瓜"
      },

在子组件中这样
inject: ['text'],

主要运用props
以一个基础的vue文件为例
vue实例上的数据可以通过props传到子组件（个人理解为在子组件用props接收，在dom需要用v-bind绑定数据接收）
如果想要更改props接收到的值 需要在data中把接收到的值赋给他并且在渲染时换成这个被赋值的

<div id='app'>
        <tab :arr1=arr :number=number></tab>
        <tab :number=number></tab>
</div>

 var tab = {
            template: `
                <ul>
                    <li v-for="item in arr1"> {{number}}{{item}}</li>
                </ul>
            `,
            // props: ['arr1']
            props:{
                arr1:{
                    type:Array,
                    required:false
                },
                number:{
                    type:Number,
                    default:1 //默认值 没有传递该属性 默认为此值
                }
            }
        }
        
        
        Vue.component('tab', tab)
        
        new Vue({
            el: '#app', // js内容要执行在 id为app的标签中 el 就element(元素) vue可以用el标签挂载点
            data: { // vue中存储数据的地上
                arr: ['fff','dddd','ssss'],
                number:134
            }
        })

子传父

运用事件映射 this.$emit（）
子组件通过事件映射一个事件以及数据
然后父组件在子组件上调用这个事件 得到数据

 通过this.$children也可以找到父组件中的数据

<div id="app">
        <parent></parent>
    </div>

父组件

const parent = {
            template:`
                <div>英雄联盟{{role}}
                	//调用映射事件
                    <child @sendRole="getRole"></child>
                </div>
            `,
            data() {
                return {
                    role:''
                }
            },
            methods: {
            	//获取数据
                getRole(role){
                    // console.log(role)
                    this.role = role
                }
                
            },
        }

子组件

const child = {
            template:`
            <ul> 
            <li v-for="item in tabList" @click="choseRole(item)">{{item}}</li>
            </ul>
               
            `,
            data(){
                return{
                    tabList:['小鱼人','EZX','SRX']
                }
            },
            methods: {
                choseRole(role){
                    // console.log(role)
                    // 第一个是事件名称 第二个是传递的值也就是携带的参数 即tabList
                    this.$emit('sendRole',role)
                }
            },
        }

Vue.component('parent',parent)   
        Vue.component('child',child)         
        new Vue({
            el:"#app",
            data(){
                return{

                }
            },
            methods: {
                
            },
        })

祖孙传值

同样运用事件映射 与上面的道理相同

<div id="app">
        <grand-father></grand-father>
    </div>

const grandFather={
            template:`
                <div>爷爷
                    <parent @send="getDD">
                    </parent>
                </div>
            `,
            methods:{
                getDD(role){
                    console.log(role)
                }
            }
        }
        const parent = {
            template:`
                <div>
                英雄联盟
                    <son @send="getRole"></son>
                </div>
            `,
            data() {
                return {
                    
                }
            },
            methods: {
                getRole(role){
                    this.$emit('send',role)
                }
                
            },
        }
        const son = {
            template:`
                <div @click=sendData>  
                子组件
                </div>
            `,
            methods: {
                sendData(){
                   this.$emit('send','德玛西亚')
               }
            },
        }
        Vue.component('grandFather',grandFather)   
        Vue.component('parent',parent)   
        Vue.component('son',son)         
        new Vue({
            el:"#app",
            data(){
                return{

                }
            },
            methods: {
                
            },
        })

兄弟组件传值

运用bus
通过bus（也就是再创建一个vue实例）将数据全部存入到这个实例中 再进行调用
$on监听事件调用

<div id="app">
        <parent></parent>
</div>

const parent = {
            template:`
                <div>
                游戏名称：英雄联盟
                 <div>选中的角色：{{role}}</div>
                 <div>选中的地图：{{map}}</div>
                 <person @send:role=getRole></person>
                 <gamemap @sendMap="getMap"></gamemap>
                </div>
            `,
            data(){
                return{
                        map:'',
                        role:''
                }
            },
            methods:{
                getMap(map){
                    this.map=map
                    // console.log(map)
                },
                getRole(role){
                    this.role=role
                }
            }
        }
        const person = {
            template:`
               <ul>
                <li v-for="item in tabList" @click=choseRole(item)>{{item}}</li>
               </ul>
            `,
            data() {
                return {
                    tabList: ['小鱼人', '托儿所', '快乐风男', '压缩']
                }
            },
            methods:{
                choseRole(role){
                    this.$emit('send:role',role)
                    // console.log(this.bus)
                    this.bus.$emit('send:data',role)
                }
            }
            
        }
        const gamemap = {
            template:`
                <ul>
                <li v-for="item in mapList" @click="choseMap(item)">{{item}}
                <div>角色：{{role}}</div>
                </li>
                
               </ul>
            `,
            
            data() {
                return {
                    mapList: ['召唤师峡谷', '嚎哭深渊', '巨龙之巢'],
                    role:''
                }
            },
            created() {
                this.bus.$on('send:data',(res) =>{
                    console.log(res)
                    this.role = res
                })
            },
            methods:{
                choseMap(map){
                    this.$emit('sendMap',map)
                }
            }
        }
        Vue.component('parent',parent)
        //person与gamemap是兄弟组件
        Vue.component('person',person)
        Vue.component('gamemap',gamemap)
        var bus = new Vue //虚拟空间  Vue实例 接收数据 
        Vue.prototype.bus = bus 
        new Vue({
            el:"#app",
            data(){
                return{

                }
            },
            methods: {
                
            },
        })