vue传值(子向父 && 父向子)

1:父级向子集传值

方法（1）子组件接受一个数组

  <div id="app">
        <mycom :title='title' :contnt ='content'></mycom>
    </div>

  const vm = new Vue({
            el: "#app",
            data: {
                info: {
                    title: "你好啊vue",
                    content: 22222222
                }
            },
            components: {
                mycom: {
                    props: [],
                    template: `<div><h4>{{title}}</h4><p>{{content}}</p></div>`
                }
            }
        })

方法（2）：子组件接受一个对象

 <div id="app">
        <mycom :title ="title" :content ='content'></mycom>
</div>
  const vm = new Vue({
            el: "#app",
            data: {
                info: {
                    title: "你好啊vue",
                    content: 22222222
                }
            },
            components: {
                mycom: {
                    props: {
                        title: {
                            type: String,
                            default: '李博涛'
                        },
                        content: {
                            type: Number,
                            //是否必须
                            required: true,
                            validator(value) {
                                return value > 20000
                            }
                        }
                    },
                    template: `<div><h4>{{title}}</h4><p>{{content}}</p></div>`
                }
            }
        })

 

方法（3）当有多个属性要传递的时候使用v-bind

<div id="app">
        <mycom v-bind='info'></mycom>
</div>
 const vm = new Vue({
            el: "#app",
            data: {
                info: {
                    title: "你好啊vue",
                    content: 22222222
                }
            },
            components: {
                mycom: {
                    props: {
                        title: {
                            type: String,
                            default: '李博涛'
                        },
                        content: {
                            type: Number,
                            //是否必须
                            required: true,
                            validator(value) {
                                return value > 20000
                            }
                        }
                    },
                    template: `<div><h4>{{title}}</h4><p>{{content}}</p></div>`
                }
            }
        })

2：子集向父级传值

绑定一个click事件，或者一个回调函数里，使用$emit('name',value)

在父级种定义@name，并指定执行函数