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)
                }
            }
        }
    }
})