父子组件传值,非父子组件传值,作用域插槽:

标题:父子组件传值,非父子组件传值,作用域插槽:

个人价值观: 我们现在不谈技术,不谈bug,就谈人生价值观,从小我就喜欢学习钻研一些东西,将摩托车拆掉(肯定是装不起来的),将冰箱锤烂(目的是向看看里面到底是什么组成的),到了大学,不知道怎么滴就不爱学习了,到处乱逛,期末排名成绩一把索到了倒数可以用手指头抠明白的名次,毕业之后危机慢慢降临,俗话说不是不报,时候未到,用歇斯底里的最后一口气将自己从地狱拯救出来,接触了前端开发,一根生死绳,慢慢地往上爬,相信终将有所收获,致一起死磕在前端道路上的朋友,谢谢

1.父组件向子组件传值:

父组件代码:

<template>
<div>
    <child @sendiptVal="getVal" name1="张三" name2="李四"></child> 
</div>
  </template>
  <script>
  //导入子组件
 
  import child from './child1.vue';
  export default {
 //注册子组件
 components:{
    child,
 },
 //获取子组件传递过来的值 
 methods: {
    getVal(val){
        console.log(val);
       }
    },
}
</script>

子组件代码:

<template>
    <div>
        <h1>{{name1}}</h1>
        <h3>{{name2}}</h3>
        <button @click='subParent()'>提交数据给父组件</button>
    </div>
</template>

<script>
export default {
    //子组件接收父组件传递的参数,可以写成数组的形式也可以写成对象的形式
    // props:['name1','name2'],
    props:{
        name1:String,
        name2:String,
    },
    data(){
        return {
            inputValue:'儿子组件:我是值'
        }
    },
    //向父元素传递值
    methods: {
        subParent(){
            this.$emit("sendiptVal", this.inputValue) 
        }
    },
}
</script>

效果

2.非父子组件之间传值:

2.1.公共bus.js 实例Vue
//非父子组件之间传值使用的中间件
import Vue from 'vue'

export default new Vue()
2.2.组件1
<template>
    <div style="background-color:red;">
        这是组件1
        <button @click="sendValue">传值给组件2</button>
    </div>
</template>

<script>
import bus from './bus.js'
export default {
    methods:{
        sendValue(){
            // 使用公共的bus传值
            bus.$emit('event1',{name:'小明',age:25})
        }
    }
}
</script>
组件2:
<template>
    <div style="background-color:green;">
        这是组件2
    </div>
</template>

<script>
import bus from './bus.js'
export default {
    mounted(){
        //监听事件
        /**
         * 参数1：自定义事件名称
         * 参数2：回调函数
         */
        bus.$on('event1',data=>{
            console.log("----组件2----")
            console.log(data)
        })
    }
}
</script>

公共展示组件:
<template>
    <div>
        <child1></child1>
        <child2></child2>
    </div>
</template>
<script>
//导入两个非父子组件
import child1 from './child2.vue';
import child2 from './child3.vue';
export default {
    //注册组件
    components:{
        child1,
        child2,
    },
   
}
</script>

效果

3.作用域插槽

子组件:
<template>
    <div>
        <li v-for="todo in todos" :key="todo.id">
            <!--获取父组件传递过来的数据  同时向父组件传值-->
            {{todo.text}}
            <slot :aa="todo" cc="我是子组件"></slot>
        </li>
    </div>
</template>
<script>
export default {
    //规定传递过来的类型
    props:{
        todos:Array
    }
}
</script>

父组件:
<template>
    <div>
        <h1>我是父亲</h1>
        <!--作用域插槽-->
        <toDo :todos="todos">
            <template slot-scope="bbb">
                <div>
                    <!--接收子组件传递过来数据 这就可以为所欲为了-->
                    <span v-if="bbb.aa.id==1">我是吃饭</span>
                    <span v-else-if="bbb.aa.id==2">我是睡觉</span>
                    <span v-else="bbb.aa.id==3">我是做梦</span>
                </div>
            </template>
        </toDo>
    </div>
</template>
    
<script>
//导入子组件
import toDo from './toDo';

export default {
    //注册子组件
    components:{
        toDo
    },
    data(){
        return {
            //绑定传递数据
            todos:[
                {id:1,text:'吃饭'},
                {id:2,text:'睡觉'},
                {id:3,text:'做梦'}
            ]
        }
    }
}
</script>

效果

总结: 根据接口条件使用不同的获取跨域请求数据,灵活使用,相信自己享受技术