vue--父子组件传递数据

vue中的组件是自定的标签，可以扩展的原生html元素，封装可复用的代码

note：

1、在标签命中不要使用大写，标签名字必须用短横线隔开

2、模板中只能有一个根元素，不能使用并列标签。

3、子组件不能直接使用父组件的数据

4、子组件可以声明自己的数据

 

一、子组件调用父组件的data中的值：

父组件：

export default {
        data() {
            return {
                aaa:'777'
            }
        }
  }

子组件：

export default {
        data() {
            return {

            }
        }，
        methods:{
            callParent(){
                console.log(this.$parent.aaa)
            }
        }
  }

当子组件调用callParent方法的时候 显示的结果是父组件data中aaa的值777

 

二、组件之间的数据传递

1、每个组件是没关系的，都应该产生自己的数据。在组件中data使用的方法和默认的vm一样。只是data不再是对象而是函数。组件可以无限嵌套。

2、声明组件的名字，不能为已经存在的标签

3、组件的嵌套，子组件必须写在父组建的模板中才能使用

 

1、父级向子级传递数据（传递的属性值）

1、如果直接写a='b'格式传递的是字符串，动态数据获取用的是v-bind，一般无论是动态还是静态，我们都会采用。

2、:msg='meat',meat是变量; msg='meat',meat是字符串，:msg="'meat'",meat是字符串

3、子级不能直接改变父级的数据，如果要修改可以将父级的数据修改后赋值给子级的变量，可以使用data或者computed

<div id=app>
    <child :data='aaa' :data1="bbb"></child>
    //此处，在子组件中左边的是子组件的接收,用props接收,如果是放在数组中每一项就是一个字符串,右边是从父级传递的数据。
</div>
<script>
    let vm=new Vue({
            el:'#app',
            data:{
            aaa:'xxxxx',
            bbb:'yyyyy'
            }
            components:{               // 子组件
                child:{
                props:['data','data1']，
                template:'<div>{{msg}}</div>',
                data(){
                    return {msg:this.data+'zxvv'}
                    }，
                computed：{
                    msg:{
                        get(){
                        return  this.data+'zxvv'
                            }
                        }
                    }
                }   
            }
        })
</script>

props中的validate：

props：{
    aa:{
        type:[Number,String],//选择值得类型符不符合要求
        default:'acac',//默认值
        validator(val){//校验函数
            return val>200//返回false，校验失败。
        }
        required：true，//代表属性必须填     
    }
}

 

2、子级向父级传递数据（借助于事件）

1、子级$emit后会触发自己身上的某一个自定的方法，这个方法对应的函数在父级的身上。

<div id="app1">
    {{datas}}
    <child @get-data="getData"></child>//自定义方法写在自己身上，右边的是父级对应方法的函数
</div>
let vm1 = new Vue({
        el: '#app1',
        data: {
            datas: '',//用来接收自己传递的空数据
        },
        methods: {
            getData(msg){//接受的参数就是从子级传递过来的数据
                this.datas = msg;
            }
        },
        components: {
            child: {
                template: `<div><button @click="say">{{msg}}</button></div>`,//绑定触发事件
                methods: {
                    say(){//触发事件，以及自定义方法
                        this.$emit('get-data', this.msg);//这里的this指的是当前子组件
                    }
                },
                data(){
                    return {
                        msg: 'xxx'
                    }
                }
            }
        }

    })