vue组件内绑定事件没有触发

Question

如下。 点击click无效
父组件：

 <self-search @changeValue="obj => { Object.assign(params, obj); }"></self-search>

子组件：

<template>
    <div>
        <button type="button" class="option-btn blue-btn ml20" @click="openDialog">高级搜索</button>
        
    </div>
</template>

<script>
    export default {
        name: "self-search",
        data (){
            return {
                selfDialog: {
                    isShow: false,
                    title: '高级搜素'
                },
                params: {

                }
            }
        },
        watch: {
            params (value){
                this.$emit("changeValue", value);
            }
        },
        methods: {
            openDialog (){
                //这里没有进来
                debugger;
            }
        }
    }
</script>

Answer 1

写法有误；应该通过this.$emit('父组件事件名', '参数')，触发父组件的方法，如下；
子组件：

<button type="button" class="option-btn blue-btn ml20" @click="openDialog">高级搜索</button>
methods: {
    openDialog (){
        //这里没有进来
        this.$emit('fatherFuc', '1111')
    }
}

父组件：

<child @fatherFuc="sendParams"></child>
methods: {
    sendParams(val){
        console.log(val); // 打印出啦的值应该是：1111
    }
}

Answer 2

你是通过$emit将子组件的值传向父组件并触发父组件事件处理子组件传过来的值，应该是：

<template>
  <div>
    <button type="button" class="option-btn blue-btn ml20" @click="openDialog(args)">高级搜索</button>
  </div>
</template>

<script>

export default {
    name: "self-search",
    data (){
        return {
            selfDialog: {
                isShow: false,
                title: '高级搜素'
            },
            params: {

            }
        }
    },
   methods: {
        openDialog (args){
          this.$emit('changeValue',args) 
        }
    }
}
</script>

父组件：

<self-search @changeValue="dealArgs"></self-search>

父组件对子组件传过来的数据处理应在对应的methods中处理

methods: {
  dealArgs(value) {
    //这里value就是子组件传过来的值， 然后你可以在这个方法里对他进行处理 
  }
}

Answer 3

你似乎用了点JSX上去，Vue默认是不支持JSX的

发现两个问题

1.下面的@changeValue应该使用对应的methods来回调

<self-search @changeValue="obj => { Object.assign(params, obj); }"></self-search>

2.不应该watch对象的属性, watch params只是监听变量的属性添加删除，但不能对应值的变动。
应该使用@input

watchs: {
    params() {}
}

可以参考这个预览效果

预览地址