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

青旅半醒 2021-09-15 14:20 555阅读 0赞

**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,的值是高渐离,因此:最终输出的结果为”父级中的方法 高渐离”。

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

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>父向子通信</title>
        <style type="text/css">
            #app {
                border: slateblue 1px solid;
                width: 480px;
                margin: auto;
                padding: 20px;
                border-radius: 5px;
                background: #f2f2f2;
            }
    
            #wrapper {
                border: 1px solid red;
                width: 450px;
                margin: auto;
                padding: 10px;
                border-radius: 5px;
                background: #f9f9f9;
            }
        </style>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    
    <body>
        <div id="app">
            <h1>该部分为父组件</h1>
            <h2>姓名：{
       {sString}}</h2>
            
            <input type="text" v-model="sValue">
            
            <p>显示父级传入的值:{
       {oStudent.name}}</p>
            
            <child :desc="sString" :students="oStudent" :hou="sValue"></child>
        </div>
    </body>
    
    </html>
    <template id="child">
        <div id="wrapper">
            <h1>该部分为子组件</h1>
            
            <p>1、显示父级传过来的值:{
       {desc}}</p>
            <p>2、(父向子传值-对象方式)接收到父级传过来的值:{
       {students.job}}</p>
            <p>3、显示父级中input标签动态输入的内容:{
       {hou}}</p>
            <button @click="useParent">4、子组件调用父级中的方法</button>
        </div>
    </template>
    <script>
        // export default {};
        let child = {
            template: '#child',
            data() {
                return {};
            },
            methods: {
                useParent() {
                    // 调用父级组件的方法
                    // $parent: 访问父级组件的实例 $root: 访问根实例 在本例中$parent与$root是一样.
                    this.$parent.doParent(this.desc);
                }
            },
            // 组件中的钩子函数
            // 1.created 当前组件实例创建好,但是页面没有显示
            created() {
                setInterval(() => {
                    // 注意:父向子是单向数据流变化,在子组件中的变化,不会影响到父组件
                    this.hou = '李斯';
                    // 1.传入的是引用,可以通过该对象改变属性的值,会影响父级.
                    // this.students.name = '盖聂';
                    // 2.传入的是值,不会影响父级
                    this.students = {
                        name: '嬴政',
                        job:'皇帝'
                    };
                }, 5000);
            },
            // 可以是数组, 但是不严谨, 建议使用对象
            // 注意:父向子是单向数据流变化,在子组件中的变化,不会影响到父组件
            // 值传递（简单类型）/引用传递(array,object)
            // 要想接收外部传进来的值,那么一定要放在props中
            props: {
                // 注意:写属性名的时候,建议不要写成驼峰命名法.写成驼峰命名时,在父级中调用需要写成小写-小写的形式.
                hou: {
                    type: String
                },
                desc: {
                    type: String,
                    // default是可选的
                    default: '自己设置的默认值',
                    required: true
                },
                students: {
                    type: Object,
                    // 设置对象的默认值，需要使用工厂函数，返回默认值。
                    default: function () {
                        return {
                            name: '韩非',
                            age: 20
                        };
                    }
    
                }
    
            }
        };
    
        new Vue({
            el: '#app',
            components: {
                child
            },
            data: {
                sString: '高渐离',
                oStudent: {
                    name: '卫庄',
                    job:'杀手'
                },
                sValue: ''
                
            },
            watch: {
                sValue: function (newValue, oldValue) {
                    console.log(newValue);
                }
            },
            methods: {
                doParent(msg) {
                    console.log('父级中的方法', msg);
                }
            }
        });
    </script>

**效果图**

![70][]

[70]: /images/20210802/bb4a9f535f6f489cb950e6f3fa2302cf.png