vue——11-父子组件 父传值（ 数据和方法 ）给子

父子组件

<div id="enjoy">
    <parent></parent>
    <!--
    <my-child1></my-child1>
    会报错：因为外部拿不到子组件
    解决方法：单独子组件拿出来定义一下
    -->
    <child></child>
</div>

        {
            //1.子组件构造器
            let Child1 = Vue.extend({
                template: `<img src="../images/fashion-001.jpg" width="300">`
            });

            let Child2 = Vue.extend({
                template: `<img src="../images/fashion-002.jpg" width="300">`
            });

            //想要单独获得设置子组件
            Vue.component('child',Child1);

            //2.父组件
            Vue.component('parent', {
                //注册子组件
                components: {
                    'my-child1': Child1,
                    'my-child2': Child2
                },
                //在父组件下运行子组件
                template:`
                <div>
                <my-child1></my-child1>
                <my-child2></my-child2>
                </div>
                `
            });

            //3.关联位置
            new Vue({
                el: '#enjoy'
            })
        }

父组件给子组件传值

传数据

html

<div id="app">
    <!-- 父组件，可以在引用子组件的时候，通过属性绑定（v-bind:）的形式，
    把需要传递给子组件的数据，以属性绑定的形式，传递给子组件内部，供子组件使用 -->
    <com1 :parentmsg="msg"></com1>
</div>

js

        let vm = new Vue({
            el: '#app',
            data: {
                msg: '我是父组件中的数据！'
            },
            methods: {},
            components: {
                com1: {
                    template: '<h1>这是子组件---{{parentmsg}}---{{msg}}</h1>',

                    // 把父组件传递过来的 parentmsg 属性，先在 props
                    // 数组中定义一下，这样，才能使用这个数据
                    // 注意：组件中的所有 props 中的数据，都是通过父组件传递给子组件的
                    // props 中的数据都是只读的，无法重新赋值
                    props: ['parentmsg'],

                    // 注意：子组件中的 data 数据，并不是通过父组件传递过来的，
                    // 而是子组件自身私有的，比如：子组件通过Ajax，请求回来的数据，
                    // 都可以放在 data 身上；
                    // data 上的数据，都是可读可写的；
                    data() {
                        return {
                            msg: '我是子组件自身私有的数据！'
                        }
                    }
                }
            }
        });

传方法

html

<div id="app">
    <!-- 父组件向子组件传递方法，使用的是事件绑定机制；v-on，
    当我们自定义了一个事件属性之后，那么子组件就能够，来调用传递方法-->
    <com1 @func="show"></com1>
</div>

<template id="tmp1">
    <div>
        <h1>这是子组件</h1>
        <input type="button" @click="myclick" value="这是子组件中的按钮，点击它，触发父组件传递过来的 func 方法">
    </div>
</template>

js

        //定义一个字面量类型的组件模板对象
        let com1 = {
            template: '#tmp1',
            data() {
                return {
                    num1: 123,
                    num2: 456
                }
            },
            methods: {
                myclick() {
                    //当点击子组件的按钮的时候，如何拿到父组件传递过来的 func 方法，并调用？
                    //emit 英文原意：是触发、调用的意思
                    //emit 第一个参数表示事件名，之后的参数表示向事件中的方法所传入的参数
                    this.$emit('func', this.num1, this.num2)
                }
            }
        };

        let vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                show(data1, data2) {
                    alert('调用了父组件的 show 方法:---' + data1 + '---' + data2)
                }
            },
            components: {
                //相当于 com1: com1
                com1
            }
        });

父子组件传方法的实例链接