官网的一句话:父子组件的关系可以总结为 props 向下传递,事件方法向上传递。父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息。

在这里插入图片描述


子组件渲染父组件的数据,在上一篇文章中做了一些解释,这里要说明的是,子组件使用 $emit触发父组件的自定义事件。

父组件向子组件传递方法,使用的是 事件绑定机制v-on: 当我们自定义一个事件属性之后,那么,子组件就能够通过某种方法,来调用传递进去的这个方法了。

$emit语法:

vm.$emit(eventName,args);

参数说明:第一个参数 eventName,表示自己定义事件名称。
第二个参数:表示要传给父组件的参数。

例子:

<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title></title>
    <script src='../lib/vue.js'></script>
</head>

<body>
    <div id='app'>
        <!-- 父组件向子组件 传递 方法,使用的是 事件绑定机制;v-on ,当我们自定义了一个事件属性之后,那么,子组件就能够,通过某些方法,来调用 传递进去的这个方法了 -->
        <com2 @func="show"></com2>
    </div>
    <template id="tmpl">
        <div>
            <H1>这是子组件</H1>
            <input type="button" value="这是子组件中的按钮-点击它,触发 父组件传递过来func方法" @click="myClick">
        </div>
    </template>

    <script>
        // 定义了一个字面量类型的 模板对象
        var com2 = {
            template: '#tmpl', 	//通过制定了一个 Id,表示 说,要去加载 这个制定Id的 template 元素中的内容,当做 组件的 HTML 结构
            data() {
                return {
                    sonmsg: {
                        name: '小儿子',
                        age: 15
                    }
                }
            },
            methods: {
                myClick() {
                    // 当点击子组件的按钮的时候,如何 拿到 父组件传递过来的 func方法,并调用这个方法?
                    // emit 英文原意:触发 调用 发射的意思
                    this.$emit('func', this.sonmsg); 	//第一个参数是自定义事件的名称,后边这个就是传参
                }
            },

        }


        var vm = new Vue({
            el: '#app',
            data: {
                datamsgFromSon: null
            },
            methods: {
                show(data) {
                    console.log('调用了父组件身上的 show 方法----' )
                    console.log(data)
                    this.datamsgFromSon = data;	//子组件向父组件传值
                }
            },
            components: {
                com2
                // 在属性中,上边可以直接解析成这样 com2:com2
            }
        })
    </script>
</body>

</html>

最简单易懂的例子(一看就懂)

简单理解:父组件通过传递 注册函数方法 给子组件,在子组件中,子组件通过 $emit(“传给子组件的方法名”,xxx) 来把要传的值通过参数传给父组件;


父组件

//这里父组件把getCount方法传递给子组件,
//但是getGoodsCount也是一个【带参数】的函数方法,需要在父组件中实现业务,
//然后在子组件中通过,$emit('getCount',xxx) 触发getCount函数,从而实现传参给父组件触发getGoodsCount方法
<template>
	<numberbox @getCount="getGoodsCount"></numberbox>
</template>

<script>
	export default {
		data(){
			return {
				goodsCount:1
			}
		},
		methods:{
			getGoodsCount(count){
				this.goodsCount=count;
			}
		}
	}
</script>

子组件

<template>
</template>
<script>
export default {
	data(){
		return{
			currentCount:10
		}
	},
	methods:{},
	watch:{
		//我在这里的例子,是做一个监听用的,监听 currentCount 这个值发生变化,
		//然后立即触发 【父组件传过来的getCount方法】,把新的值传给父组件
		'currentCount':function(newValue,oldValue){
			//$emit('函数名',要传的参数)
			this.$emit("getCount",newValue)
		}
	}
}
</script>
Logo

前往低代码交流专区

更多推荐