Vue中@click中函数名字中的数据（传参数据）

Vue中@click中函数名字中的数据传参数据
html代码

<div id="root">
        
            <component :is="cueeentView">component>
        
        
        <hr>
        <button @click="changView('A')">组件Abutton>
        <button @click="changView('B')">组件Bbutton>
        <button @click="changView('C')">组件Cbutton>
    div>



"root">
Vue.component('componentA',{
            template:`
组件A
`,
            created() {
                console.log('A');
            },
        })
        Vue.component('componentB',{
            template:`
组件B
`,
            created() {
                console.log('B');
            },
        })
        Vue.component('componentC',{
            template:`
组件C
`,
            created() {
                console.log('C');
            },
        })
        let vm = new Vue({
            el:'#root',
            data:{
                cueeentView:'componentA'
            },
            methods: {
                changView:function(data){
                    // console.log(data);
                    this.cueeentView=`component${data}`
                }
            },
        })

点击按钮，changView:function(data)里面的data数据是之前在标签中设定的A，B，C。
函数里的参数是怎么联系起来的。

拿A按钮举例
点击传参数A,进方法在29行就成了

this.cueeentView=componentA //`component${data}`这句就是字符串的拼接

然后就对应到第3行的组件componentA了

你点击事件 传了 值 你在 changView 接收到了 并且 this.cueeentView =component${data} 这个data 就是 点击事件穿过来的 。因为 component is 里绑定的是cueeentView 。上面 对 cueeentView 赋值了 。component${data} 动态拼成的组件 。

页面渲染中，每个按钮标签内部对象中的onClick开始赋值为changView方法，
页面渲染结束，用户点击button按钮B，开始调用方法changView，实参为‘B’,
方法内开始属性(cueeentView)赋值为componentB,
标签内component中cueeentView值动态变化为componentB，
component组件内 接收到is属性传过来的值componentB，开始调用组件内方法进行切换组件重新渲染

img