Vue的组件如何传值（1）

Vue的组件如何传值？

父子通信的方式：

父向子传递数据是通过 props，
子向父是通过 $emit；
通过 $parent / $children 通信；
$ref，$refs 也可以访问组件实例；

父传子：

子组件在props中创建一个属性，用来接受父组件的传来的值，
在父组件注册子组件，通过属性绑定的形式，把需要传递给子组件的数据传递给子组件的内部供子组件使用。
然后在子组件标签中添加props属性，用以接收父组件传过来的值。

父传子简略总结：

父组件引入注册子组件；将父组件的自定义属性传递给子组件；<Zujian :zi_zujian="fu_zujian" />
子组件在props中创建一个属性，用以接收父组件传过来的值；
父传子显示的值 {{ users }}

父传子的介质是props，是向下传递。

子传父：

通过点击事件的方式，触发一个自定义事件，
将需要传递的值，作为$emit的值做第二个参数，该值将作为实参传递给响应自定义事件的方法，
在父组件当中，注册子组件，在子组件标签上监听自定义事件，并添加一个响应事件的处理方法。

子传父简略总结：

父组件里自定义一个方法，@ziclick="fuclick" （左子[自定义事件]右父[子传给父的值]）
子组件this.$emit('ziclick', '子的值')
父组件通过fuclick(res){'接收子的值res'}

子传父的介质是自定义事件，是向上传递。$emit可以作为一个事件流来看。

兄弟组件传值：

使用一个事件处理中心 event bus，const bus = new Vue()

A 组件通过this.$emit('约定的值msg', res)

B 组件通过this.$on(约定的值msg',res=>{console.log(res)})

父传子 props，示例：

<body>
    <div id="app">
       <child :fname="name1"></child>
    </div>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
        Vue.component('child',{
            template: `
                <div>child子组件接收：{{fname}}</div>
            `,
            props: ['fname']
        })
        const vm = new Vue({
           el:'#app',
           data() {
               return {
                  name1: '父组件要传递的值☞： 張三'
               }
           }
        });
    </script>
</body>

子传父：this.$emit，子传父通过事件触发的方式。示例：

<body>
    <div id="app">
        <child @ztof="fafun"></child>
    </div>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
        Vue.component('child',{
            // template:`
            //     <button>子组件</button>
            // `,
            data(){
                return {
                    zmsg:'子的信息xxxx'
                }
            },
            created() {
                this.$emit('ztof',this.zmsg)
            }
 
        })
        const vm = new Vue({
           el:'#app',
           data() {
               return {
               }
           },
           methods:{
            fafun(zmsg){
                console.log('zmsg :>> ', zmsg); //子的信息xxxx
            }
           }
 
 
        });
    </script>
</body>

兄弟组件之间的传参 eventBus，示例：


组件1：

    data(){
        return {
            todoList:''
        }
    },
    methods:{
        addList:function(){
         //重点： $emit自定义事件
            eventBus.$emit('add',this.todoList)
        }
    }
组件2:

    created:function(){
        this.acceptList()
    },
    methods:{
        acceptList:function(){
        // 重点：$on接收事件
            eventBus.$on('add',(message)=>{
                this.lists.push({ name:message,isFinish:false })
            })
        }
    }