vue中父、子组件及其传值

一、什么是父、子组件

类似于子元素和父元素，子组件和父组件也是“父”套“子”。具体用法如下：

声明两个组件，这里用之前说的的四种方式中的最后一种。

<div id='app'>
        <father></father>
</div>
<template id="father">
        <div>我是父组件
        //将子元素标签放在父组件中
        <son></son>
        </div>
</template>
<template id="son">
        <div>我是子组件</div>
</template>
<script>
    let son = { template: "#son" };
        let father = {
            template: "#father",
            components: {
                son
            }
        }
    //将父组件放在vue实例中
    const vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {

            },
            components: {
                father,
            }
        })
</script>

二、传值——父传子（vue为父，father为子）

第一步：在子组件中写props，用于定义来自父组件的参数的类型及默认值（防止未传参报错）。

第二步：在父组件中子组件标签中书写参数

<div id='app'>
        <son formapp="来自app传值" ></son>
    </div>

    <template id="son">
        <div>
        </div>
    </template>

    <script>
        Vue.component("son ", {
            template: "#son ",
            // 接受父组件传值
            props:{
                // formapp:[String,Number],
                formapp:{
                    type:[String,Number],
                    default:'fromappfather'
                },
            },
            created() {
                console.log(this.formapp);
            },
        })

        const vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
        })
    </script>

三、传值——子传父

第一步：在父组件中给引用的子组件注册一个事件（这个事件的名字是自定义的）

第二步：子组件可以触发这个事件$emit('事件名字')

第三步：子组件给父组件传递数据，$emit方法第二个参数可以定义子组件给父组件传递的内容

第四步：在父组件中怎么拿到这内容，父组件这个方法没有自定参数，在父组件的方法直接加这个参数就可以拿到

第五步： 父组件有自定义参数，可以传入$event也可以拿到子组件传递的数据。通过$event只能传递第一个参数。

<div id='app'>
        <father></father>
    </div>

    <template id="father">
        <div>
             father
             <br>
             子传父：{{fromsondata}}
             <br>
            <son @myson="fromson"></son>
        </div>
    </template>

    <template id="son">
        <div>
            son
            <button @click="tofather"> 点我传参</button>
        </div>
    </template>


    <script>
        Vue.component("father", {
            template: "#father",
            data() {
                return {
                    msg:'hello',
                    fromsondata:""
                }
            },
            methods:{
                // data就是子组件传的值
                fromson(data){
                    console.log(data);
                    this.fromsondata = data

                }
            }
          
        })
        Vue.component("son", {
            template: "#son",
            data() {
                return {

                }
            },

            created() {
                // 触发子传父  this.$emit( ‘自定义事件’，传递参数)
                // this.$emit('myson','这是来自子组件的参数')
            },
           methods:{
            tofather(){
                // 子传父
                this.$emit('myson','这是来自子组件的参数')
            }
           },
        })


        const vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
        })
    </script>