Vue组件传值

1. 父组件给子组件传值, 利用props

父组件给子组件传值, 利用props

1. 给子组件声明一个props:[]，做用：用来接收父组件传递过来的值（数组里面是字符串）
2. 父组件建立一个data变量，经过v-bind指令给子组件中的props传值

1. 建立父子组件

2. 为子组件声明props, 它的做用是: 用于接收从父组件传递过来的值

   props:能够跟一个数组,数组里面的值 是一个一个的字符串(字符串形式能够是对象, 数字, 布尔值等等),这个字符串能够当成属性来使用

3. 在使用子组件的地方, 经过v-bind指令给子组件中的props赋值

<div id="app">
	<father></father>
</div>
复制代码

//建立一个father组件
Vue.component('father',{
    //2. 在使用子组件的地方, 经过v-bind指令给子组件中的props赋值
    template:'<div><p>我是父组件,我给我儿子起名叫{{mySonName}}</p><son :myName="mySonName"></son></div>',
    data () {
        return {
            mySonName:'小明'
        }
    },
    //经过components属性建立子组件
    components: {
        //建立一个son组件
        son:{
            //1. 声明props, 它的做用是: 用来接收从父组件传递过来的值
            //props:能够跟一个数组,数组里面的值 是一个一个的字符串,这个字符串能够当成属性来使用
            props:['myName'],
            template:'<p>我是子组件, 我爸爸给我取名叫{{myName}}</p>'  
        }
    }
})
复制代码

2. 子组件给父组件传值, 利用$emit

1. 建立父子组件

2. 子组件传值给父组件须要用到$emit()方法,这个方法能够传递两个参数, 一个是事件名称, 一个是须要传递的数据

3. 父组件须要监听这个方法 @tellFatherMyName="getMySonName

4. 这个函数中有一个默认参数, 该参数就表示上传上来的值

   Vue.component('father',{
       template:` <div> <p>父亲年纪大了,记性很差,我儿子告诉我他叫{{mySonName}}</p> <son @tellFatherMyName="getMySonName"></son> </div> `,
       data() {
           return {
               mySonName:'???'
           }
       },
       methods:{
           //这个函数中有一个默认参数, 该参数就表示上传上来的值
           getMySonName(data){
               this.mySonName = data
           }
       },
       components: {
           son:{
               template:'<button @click="emitMyName">点击就告诉我爸爸 我叫{{myName}}</button>',
               data () {
                   return {
                       myName:'小明'
                   }
               },
               methods: {
                   emitMyName(){
                       //子组件传值给父组件须要用到$emit()方法,这个方法能够传递两个参数
                       // 一个是事件名称, 一个是须要传递的数据
                       this.$emit('tellFatherMyName',this.myName)
                   }
               },
   
           }
       }
   })
   复制代码

   

3. 兄弟组件间传值 利用eventBus

1. 建立父组件和两个子组件
2. 兄弟组件传值须要利用一个事件总线(相似中间桥梁)

//建立一个空的vue实例, 做为事件总线
var eventBus = new Vue()
复制代码

3. 组件二给组件一传值

//1.建立一个空的vue实例, 做为事件总线
var eventbus = new Vue()

Vue.component('father',{
    template:` <div> <son></son> <daughter></daughter> </div> `,
    components: {
        son:{
            template:'<span>我妹妹告诉我她叫{{mySisterName}}</span>',
            data() {
                return {
                    mySisterName:'???'
                }
            },
            mounted() {
                //3.经过eventbus.$on()方法去监听兄弟节点发射过来的时间
                //$on有两个参数, 一个是事件名称, 一个是函数, 该函数的默认参数,就是传递过来的数据
                eventbus.$on('tellBroMyName',data=>{
                    this.mySisterName = data
                })
            },
        },
        daughter:{
            template:'<button @click="emitMyName">点击就告诉哥哥,我叫{{myName}}</button>',
            data(){
                return {
                    myName:'兰兰'
                }
            },
            methods: {
                emitMyName(){
                    //2.经过事件总线发射一个事件名称和须要传递的数据
                    eventbus.$emit('tellBroMyName',this.myName)
                }
            }
        }
    }
})
复制代码