前端，子传父--自用

dancria

已于 2022-02-16 16:14:26 修改

阅读量842

点赞数

分类专栏：前端文章标签：前端 vue.js javascript

于 2022-02-07 23:36:56 首次发布

本文链接：https://blog.youkuaiyun.com/dancria/article/details/122816157

版权

涉及功能：$emit , @

父页面需要渲染并获取子页面的信息，通过创建组件的方式实现渲染，并传输参数给自定义组件

在components文件夹中新建两个文件，分别为cld10.vue父组件,cld11.vue子组件

@click='cli'

@aa='chuan' ,$emit触发aa自定义事件，获取参数并运行chuan方法

在router文件夹index.js文件中新增两个文件在首页的点击跳转按钮

 {
            name:'cld10第10页',
            // 既是地址也是参数
            path:'/cld10/:dyx',
            component:()=>import('../components/cld10')
        },
        {
            name:'cld11第11页',
            // 既是地址也是参数
            path:'/cld11/:dyx',
            component:()=>import('../components/cld11')
        },

在首页helloworld中添加按钮和点击跳转事件

    <button @click="jump10">跳转第10页</button>
    <button @click="jump11">跳转第11页</button>


           jump10(){
      this.$router.push({path:'/cld10'+'/'+123})
    },
            jump11(){
      this.$router.push({path:'/cld11'+'/'+123})
    },

既然cld10.vue是父组件，那么就需要把cld11.vue导入到cld10.vue，形成组件

import cld11 from './cld11.vue'

同时配置组件

components:{

cld11,

}

然后在template中使用 <cld-11></cld-11>

在cld11组件中使用“@”符号

<cld-11 @aa='chuan'></cld-11>

然后配置chuan这一方法，同时为了配置初始数据使用了data

    methods:{
        chuan(val){
            this.zichuanfu=val
        },
    },
    data(){
        return{
            zichuanfu:'第十页数据'
        }
    },

然后为了配置aa这个“事件”，去cld11.vue中配置信息