<!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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="test-multiple">
        <test-button
            v-on:test="sayHi">
        </test-button>
    </div>
</body>
    <script>
        Vue.component('test-button',{
            props: [],
            template:`
                <button
                    v-on:click="$emit('test','[测试,123]')">
                    点击我切换函数，换个皮囊。
                </button>
            `,
            data () {
                return {
                    
                }
            },
            methods: {
                otherContent:function(){}
            }
        })
        new Vue({
            el:'#test-multiple',
            methods:{
                sayHi:function(s){
                    alert(s)
                }
            }
        })
    </script>
</html>

总觉得那地方不对劲，如有其他见解望周知谢谢！子组件可以通过调用内建的$emit()方法并传入一个时间名称来触发一个事件。  v-on:click="$emit('test','[测试,123]')">   如上： test是事件名，数组[测试，123]是参数  此时父组件的v-on监听器监听子组件的事件  <test-button
            v-on:test="sayHi">
        </test-button>

并传给父组件函数处理 

sayHi:function(s){
                    alert(s)
                }

是不是很像v-bind，特别经典。

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue