vue中父组件与子组件之间的传值

父组件向子组件传值

在子组件中（组件声明时）：

Vue.component('bruip-info',{
   template:`
       组件的HTML代码
   `,
   data(){
       return{  
       }
   },
   props:[],
   computed:{
   }
});

而里面的props里面就是期望父组件传给子组件本身的参数，它有两种表示方法

1.形式参数，期望父组件传递给子组件的参数
    props:['visible','title', 'likes'],
2.声明参数时顺便声明参数类型
    props:{
        visible:Boolean,
        title:String,
        likes: Number
    }

在父组件中（组件调用时）传递参数：

1.静态prop，传入的是一个常量
   传递给参数title的值是一个字符串
       -info title="true" />
       -info title=1 />
   传递给参数title的值是一个布尔类型true    
       -info :title="true" />
   传递给参数title的值是一个number类型的1    
       -info :title="1" />
   传递给参数title的值是一个对象
       -info :title="{name:'terry'}" />
   传递给参数title的值是一个数组[1,2,3]   
       -info :title="[1,2,3]" /> 
2.动态prop，传入的是一个变量(父组件中声明)
   传递给参数title的值是一个布尔值
       -info :title="isTitle" title="one"/>
       data:{
           isTitle:true
       }
   传入一个对象的所有属性
       -post v-bind="post">-post>
       post: {
           likes: 1,
           title: 'Hello Vue'
       }

例如：

>
    
>
        -info title='hello' :visible='true'>-info>
        -info :title='true' :visible='true'>-info>
        -info :title='1' :visible='true'>-info>
        -info title=1 :visible='true'>-info>
        -info :title='{name:"terry"}' :visible='true'/>
    >
    >
        // 全局组件
        Vue.component('bruip-info',{
            template:`
            
-if="visible">
                >{{title}}>
                >{{typeofTitle}}>
            >
            `,
            data(){
                return{
                }
            },
            props:['title','visible'],
            computed:{
                typeofTitle(){
                    return (typeof this.title);
                }
            }
        });
        new Vue({
            el:'#app',
        })
    >
>

结果分别显示：

子组件向父组件传值还有通过子组件改变父组件的值

父组件通过@xxx='事件函数名’来监听，然后在父组件的methods中声明’事件函数名’这个事件处理函数
子组件通过this.$emit(xxx)来通知父组件,父组件触发监听，从而触发事件处理函数

>
    
>
        >total :{{total}}>
        >>
    >
    >
        Vue.component('children',{
            template:`
            
>
                >输出值>
            >
            `,
            methods:{
                aa(){
                  // 第一个参数是用来监听的，第二个参数就是要传给父组件的值
                    this.$emit('increment','我是子组件传给父组件的值')
                },
            }
        });
        // 根组件 
        new Vue({
        el:"#app",
        data:{
            total:0
        },
        methods:{
            doSomething(data){
                this.total++;
                // data就是子组件传过来的值
                console.log(data);    // 输出hello
            }
        }
        })
    >
>

结果显示：