Vue入门-父组件向子传值与子组件调用父组件中的方法

Vuex是什么？

一般用于中大型项目，管理组件中的传值方式，相当于angular中的全局服务，里面有store声明的属性可以共享，每个组件都可以绑定。想要改变值，可以向store提交一个突变，方法便会执行一次。

父向子传值

1、child子组件对desc属性绑定的是sString,而sString的值是高渐离,故结果为: 显示父级传过来的值:高渐离。

注意:子组件要接收父组件传进来的值,那么一定要放在props中.在props中声明对应的属性（举例：desc），并进行属性绑定，绑定对应的变量（举例：sString）。

2、child子组件对students属性绑定的是oStudent，而oStudent的job属性为”杀手”,故输出的结果为”2、(父向子传值-对象方式)接收到父级传过来的值:杀手”。

3、对input标签进行双向绑定到sValue,sValue已经在父组件中声明.对szval进行监听,当其值改变的时候,在输入框输入内容时,对应的函数console.log(newValue);执行,控制台输出改变后的值.而在组件中的钩子函数created中,计时器改变其值为”李斯”。

子组件调用父组件的方法

子组件中的button按钮绑定点击事件useParent(),该useParent()方法在子组件的methods中声明,

在该方法中通过this.$parent.doParent(this.desc)调用父组件这个中的doParent()方法[功能console.log('父级中的方法',msg);],

而传入的参数desc绑定了sString,child子组件对desc属性绑定的是sString,而sString,的值是高渐离,因此:最终输出的结果为”父级中的方法 高渐离”。

代码示例（参考上面的分析理解代码）

    
    
    
    



    

        
该部分为父组件
        
姓名：{{sString}}
        
        
        
        
显示父级传入的值:{{oStudent.name}}
        
        
    

效果图