VUE学习（四）——组件传值（props，this.$emit）、ref获取DOM元素和组件、vue-router（路由）

最新推荐文章于 2024-08-17 22:22:21 发布
最新推荐文章于 2024-08-17 22:22:21 发布
阅读量1.7k 收藏 9
点赞数 3
分类专栏： # vue 文章标签： vue html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40705355/article/details/105233130
版权

一、组件传值

（一）父组件向子组件传值

以字面量的形式定义一个组件模板对象：

  <div id="app">
    <!-- <mylogin></mylogin> -->
    <login></login>
  </div>

  <script>
    // 通过 对象 字面量的形式， 定义了一个 组件模板对象
    var login = {
      template: '<h1>1234</h1>'
    }
    //  通过  Vue.component 把 组件模板对象，注册为一个全局的Vue 组件，同时，为这个组件起了一个名称，可以让我们  通过 标签形式，在页面中直接引入这个组件
    // Vue.component('mylogin', login)

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components: {
        // '组件的名称': 组件的模板对象
        // 'mylogin': login
        login
      }
    });
  </script>

1.组件实例定义方式，注意：一定要使用props属性来定义父组件传递过来的数据

<script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '123 啊-父组件中的数据'
      },
      methods: {},

      components: {
        // 结论：经过演示，发现，子组件中，默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法
        com1: {
          data() { // 注意： 子组件中的 data 数据，并不是通过 父组件传递过来的，而是子组件自身私有的，比如： 子组件通过 Ajax ，请求回来的数据，都可以放到 data 身上；
            // data 上的数据，都是可读可写的；
            return {
              title: '123',
              content: 'qqq'
            }
          },
          template: '<h1 @click="change">这是子组件 --- {{ parentmsg }}</h1>',
          // 注意： 组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的
          // props 中的数据，都是只读的，无法重新赋值
          props: ['parentmsg'], // 把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据
          directives: {},
          filters: {},
          components: {},
          methods: {
            change() {
              this.parentmsg = '被修改了'
            }
          }
        }
      }
    });
  </script>

2.使用v-bind或简化指令，将数据传递到子组件中：

  <div id="app">
    <!-- 父组件，可以在引用子组件的时候， 通过 属性绑定（v-bind:） 的形式,
     把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用 -->
    <com1 v-bind:parentmsg="msg"></com1>
  </div>

（二）子组件向符组件传值

原理：父组件将方法的引用，传递到子组件内部，子组件在内部调用父组件传递过来的方法，同时把要发送给父组件的数据，在调用方法的时候当作参数传递进去；

1.父组件将方法的引用传递给子组件，其中，show是父组件中methods中定义的方法名称，func是子组件调用传递过来方法时候的方法名称

  <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>

2.子组件内部通过this.$emit('方法名', 要传递的数据)方式，来调用父组件中的方法，同时把数据传递给父组件使用

  <script>

    // 定义了一个字面量类型的 组件模板对象
    var com2 = {
      template: '#tmpl', // 通过指定了一个 Id, 表示 说，要去加载 这个指定Id的 template 元素中的内容，当作 组件的HTML结构
      data() {
        return {
          sonmsg: { name: '小头儿子', age: 6 }
        }
      },
      methods: {
        myclick() {
          // 当点击子组件的按钮的时候，如何 拿到 父组件传递过来的 func 方法，并调用这个方法？？？
          //  emit 英文原意： 是触发，调用、发射的意思
          // this.$emit('func123', 123, 456)
          this.$emit('func', this.sonmsg)
        }
      }
    }


    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        datamsgFormSon: null
      },
      methods: {
        show(data) {
          // console.log('调用了父组件身上的 show 方法: --- ' + data)
          // console.log(data);
          this.datamsgFormSon = data
        }
      },

      components: {
        com2
        // com2: com2
      }
    });
  </script>

（三）使用ref获取DOM元素和组件

  <div id="app">
    <input type="button" value="获取元素" @click="getElement" ref="mybtn">
    <h3 id="myh3" ref="myh3">哈哈哈， 今天天气太好了！！！</h3>
    <login ref="mylogin"></login>
  </div>

  <script>
    var login = {
      template: '<h1>登录组件</h1>',
      data() {
        return {
          msg: 'son msg'
        }
      },
      methods: {
        show() {
          console.log('调用了子组件的方法')
        }
      }
    }

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        getElement() {
          //这原生js方式
          // console.log(document.getElementById('myh3').innerText)
          console.log(this.$refs.myh3.innerText)
          console.log(this.$refs.mylogin.msg)
          this.$refs.mylogin.show()
        }
      },
      components: {
        login
      }
    });
  </script>

（四）组件案例

这里是一个关于发表评论的案例，感兴趣的可以看看:

<!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="./lib/vue-2.4.0.js"></script>
  <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>

<body>
  <div id="app">


    <cmt-box @func="loadComments"></cmt-box>


    <ul class="list-group">
      <li class="list-group-item" v-for="item in list" :key="item.id">
        <span class="badge">评论人： {{ item.user }}</span>
        {{ item.content }}
      </li>
    </ul>


  </div>


  <template id="tmpl">
    <div>

      <div class="form-group">
        <label>评论人：</label>
        <input type="text" class="form-control" v-model="user">
      </div>

      <div class="form-group">
        <label>评论内容：</label>
        <textarea class="form-control" v-model="content"></textarea>
      </div>

      <div class="form-group">
        <input type="button" value="发表评论" class="btn btn-primary" @click="postComment">
      </div>

    </div>
  </template>

  <script>

    var commentBox = {
      data() {
        return {
          user: '',
          content: ''
        }
      },
      template: '#tmpl',
      methods: {
        postComment() { // 发表评论的方法
          // 分析：发表评论的业务逻辑
          // 1. 评论数据存到哪里去？？？   存放到了 localStorage 中  localStorage.setItem('cmts', '')
          // 2. 先组织出一个最新的评论数据对象
          // 3. 想办法，把 第二步中，得到的评论对象，保存到 localStorage 中：
          //  3.1 localStorage 只支持存放字符串数据， 要先调用 JSON.stringify 
          //  3.2 在保存 最新的 评论数据之前，要先从 localStorage 获取到之前的评论数据（string）， 转换为 一个  数组对象， 然后，把最新的评论， push 到这个数组
          //  3.3 如果获取到的 localStorage 中的 评论字符串，为空不存在， 则  可以 返回一个 '[]'  让 JSON.parse 去转换
          //  3.4  把 最新的  评论列表数组，再次调用 JSON.stringify 转为  数组字符串，然后调用 localStorage.setItem()

          var comment = { id: Date.now(), user: this.user, content: this.content }

          // 从 localStorage 中获取所有的评论
          var list = JSON.parse(localStorage.getItem('cmts') || '[]')
          list.unshift(comment)
          // 重新保存最新的 评论数据
          localStorage.setItem('cmts', JSON.stringify(list))

          this.user = this.content = ''

          // this.loadComments() // ?????
          this.$emit('func')
        }
      }
    }

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        list: [
          { id: Date.now(), user: '李白', content: '天生我材必有用' },
          { id: Date.now(), user: '江小白', content: '劝君更尽一杯酒' },
          { id: Date.now(), user: '小马', content: '我姓马， 风吹草低见牛羊的马' }
        ]
      },
      beforeCreate(){ // 注意：这里不能调用 loadComments 方法，因为在执行这个钩子函数的时候，data 和 methods 都还没有被初始化好

      },
      created(){
        this.loadComments()
      },
      methods: {
        loadComments() { // 从本地的 localStorage 中，加载评论列表
          var list = JSON.parse(localStorage.getItem('cmts') || '[]')
          this.list = list
        }
      },
      components: {
        'cmt-box': commentBox
      }
    });
  </script>
</body>

</html>

二、路由vue-router

**后端路由：**对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；

**前端路由：**对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；
参考文章：URL中的hash（井号）

（一）安装vue-router的方式

  1. 直接导入组件类库
  <script src="./lib/vue-router-2.7.0.js"></script>
  1. 使用npm安装
npm install vue-router

（二）vue-router基本使用

  1. 导入 vue-router 组件类库：
  <script src="./lib/vue-2.4.0.js"></script>
  <!-- 1. 安装 vue-router 路由模块 -->
  <script src="./lib/vue-router-3.0.1.js"></script>
  1. 使用 router-link 组件来导航
    <!-- router-link 默认渲染为一个a 标签 -->
    <router-link to="/login" tag="span">登录</router-link>
    <router-link to="/register">注册</router-link>
  1. 使用 router-view 组件来显示匹配到的组件
<router-view></router-view>
  1. 创建组件
    var login = {
      template: '<h1>登录组件</h1>'
    }

    var register = {
      template: '<h1>注册组件</h1>'
    }
  1. 创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则
// 2. 创建一个路由对象， 当 导入 vue-router 包之后，在 window 全局对象中，就有了一个 路由的构造函数，叫做 VueRouter
    // 在 new 路由对象的时候，可以为 构造函数，传递一个配置对象
    var routerObj = new VueRouter({
      routes: [ // 路由匹配规则 
        // 每个路由规则，都是一个对象，这个规则对象，身上，有两个必须的属性：
        //  属性1 是 path， 表示监听 哪个路由链接地址；
        //  属性2 是 component， 表示，如果 路由是前面匹配到的 path ，则展示 component 属性对应的那个组件
        // 注意： component 的属性值，必须是一个 组件的模板对象， 不能是 组件的引用名称；
        { path: '/login', component: login },
        { path: '/register', component: register }
      ]
    })
  1. 使用 router 属性来使用路由规则
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router: routerObj // 将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件
    });

加上路由重定向、高亮、切换动画代码如下：

<!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="./lib/vue-2.4.0.js"></script>
  <!-- 1. 安装 vue-router 路由模块 -->
  <script src="./lib/vue-router-3.0.1.js"></script>
  <style>
     /* 组件动画 */
    .router-link-active,
    .myactive {
      color: red;
      font-weight: 800;
      font-style: italic;
      font-size: 80px;
      text-decoration: underline;
      background-color: green;
    }

    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(140px);
    }

    .v-enter-active,
    .v-leave-active {
      transition: all 0.5s ease;
    }
  </style>
</head>

<body>
  <div id="app">

    <!-- <a href="#/login">登录</a> -->
    <!-- <a href="#/register">注册</a> -->

    <!-- router-link 默认渲染为一个a 标签 -->
    <router-link to="/login" tag="span">登录</router-link>
    <router-link to="/register">注册</router-link>


    <!-- 这是 vue-router 提供的元素，专门用来 当作占位符的，将来，路由规则，匹配到的组件，就会展示到这个 router-view 中去 -->
    <!-- 所以： 我们可以把 router-view 认为是一个占位符 -->
    <transition mode="out-in">
      <router-view></router-view>
    </transition>

  </div>

  <script>
    // 组件的模板对象
    var login = {
      template: '<h1>登录组件</h1>'
    }

    var register = {
      template: '<h1>注册组件</h1>'
    }



    // 2. 创建一个路由对象， 当 导入 vue-router 包之后，在 window 全局对象中，就有了一个 路由的构造函数，叫做 VueRouter
    // 在 new 路由对象的时候，可以为 构造函数，传递一个配置对象
    var routerObj = new VueRouter({
      // route // 这个配置对象中的 route 表示 【路由匹配规则】 的意思
      routes: [ // 路由匹配规则 
        // 每个路由规则，都是一个对象，这个规则对象，身上，有两个必须的属性：
        //  属性1 是 path， 表示监听 哪个路由链接地址；
        //  属性2 是 component， 表示，如果 路由是前面匹配到的 path ，则展示 component 属性对应的那个组件
        // 注意： component 的属性值，必须是一个 组件的模板对象， 不能是 组件的引用名称；
        // { path: '/', component: login },
        { path: '/', redirect: '/login' }, // 这里的 redirect 和 Node 中的 redirect 完全是两码事
        { path: '/login', component: login },
        { path: '/register', component: register }
      ],
      linkActiveClass: 'myactive'
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router: routerObj // 将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件
    });
  </script>
</body>

</html>

（三）在路由规则中定义参数

传参方式一：使用$route.query获取相应的值
1.HTML结构

  <div id="app">

    <!-- 如果在路由中，使用 查询字符串，给路由传递参数，则 不需要修改 路由规则的 path 属性 -->
    <router-link to="/login?id=10&name=zs">登录</router-link>
    <router-link to="/register">注册</router-link>

    <router-view></router-view>

  </div>

2.vue结构

<script>

    var login = {
      template: '<h1>登录 --- {{ $route.query.id }} --- {{ $route.query.name }}</h1>',
      data(){
        return {
          msg: '123'
        }
      },
      created(){ // 组件的生命周期钩子函数
        // console.log(this.$route)
        // console.log(this.$route.query.id)
      }
    }

    var register = {
      template: '<h1>注册</h1>'
    }

    var router = new VueRouter({
      routes: [
        { path: '/login', component: login },
        { path: '/register', component: register }
      ]
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      // router: router
      router
    });
  </script>

方式二：使用$route.params获取值
1.html结构

  <div id="app">

    <!-- 如果在路由中，使用 查询字符串，给路由传递参数，则 不需要修改 路由规则的 path 属性 -->
    <router-link to="/login/12/ls">登录</router-link>
    <router-link to="/register">注册</router-link>

    <router-view></router-view>

  </div>

2.vue结构

  <script>

    var login = {
      template: '<h1>登录 --- {{ $route.params.id }} --- {{ $route.params.name }}</h1>',
      data(){
        return {
          msg: '123'
        }
      },
      created(){ // 组件的生命周期钩子函数
        console.log(this.$route.params.id)
      }
    }

    var register = {
      template: '<h1>注册</h1>'
    }

    var router = new VueRouter({
      routes: [
        { path: '/login/:id/:name', component: login },
        { path: '/register', component: register }
      ]
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      // router: router
      router
    });
  </script>

（四）使用children属性实现路由嵌套

1.html结构

  <div id="app">

    <router-link to="/account">Account</router-link>

    <router-view></router-view>

  </div>

  <template id="tmpl">
    <div>
      <h1>这是 Account 组件</h1>

      <router-link to="/account/login">登录</router-link>
      <router-link to="/account/register">注册</router-link>

      <router-view></router-view>
    </div>
  </template>

2.vue结构

<script>

    // 组件的模板对象
    var account = {
      template: '#tmpl'
    }

    var login = {
      template: '<h3>登录</h3>'
    }

    var register = {
      template: '<h3>注册</h3>'
    }

    var router = new VueRouter({
      routes: [
        {
          path: '/account',
          component: account,
          // 使用 children 属性，实现子路由，同时，子路由的 path 前面，不要带 / ，否则永远以根路径开始请求，这样不方便我们用户去理解URL地址
          children: [
            { path: 'login', component: login },
            { path: 'register', component: register }
          ]
        }
      ]
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router
    });
  </script>

（五）路由命名视图

1.使用router-view的name属性命名，例如：

  <div id="app">

    <router-view></router-view>
    <div class="container">
      <router-view name="left"></router-view>
      <router-view name="main"></router-view>
    </div>

  </div>

2.案例：实现经典的头部-侧边栏-主题样式

<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="./lib/vue-2.4.0.js"></script>
  <script src="./lib/vue-router-3.0.1.js"></script>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
    }

    .header {
      background-color: orange;
      height: 80px;
    }

    h1 {
      margin: 0;
      padding: 0;
      font-size: 16px;
    }

    .container {
      display: flex;
      height: 600px;
    }

    .left {
      background-color: lightgreen;
      flex: 2;
    }

    .main {
      background-color: lightpink;
      flex: 8;
    }
  </style>
</head>

<body>
  <div id="app">

    <router-view></router-view>
    <div class="container">
      <router-view name="left"></router-view>
      <router-view name="main"></router-view>
    </div>

  </div>

  <script>

    var header = {
      template: '<h1 class="header">Header头部区域</h1>'
    }

    var leftBox = {
      template: '<h1 class="left">Left侧边栏区域</h1>'
    }

    var mainBox = {
      template: '<h1 class="main">mainBox主体区域</h1>'
    }

    // 创建路由对象
    var router = new VueRouter({
      routes: [
        // 错误写法;这样只会匹配默认的 '/'路由,三个router-view都匹配这个路由
        /* { path: '/', component: header },
        { path: '/left', component: leftBox },
        { path: '/main', component: mainBox } */


        {
          path: '/', components: {
            'default': header,
            'left': leftBox,
            'main': mainBox
          }
        }
      ]
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router
    });
  </script>
</body>

</html>
b u g
关注
专栏目录
Vue子组件传值给父组件this.$emit();
L_WalkingPig的博客
03-16 2272
上一篇博客记录了Vue父子组件传值使用props， 这篇来说说子组件传值给父组件的 ——this.$emit('xxx属性',xxx参数)； 子组件： //子组件自定义一个按钮触发onSubmit()方法; <el-form-item> <el-button type="primary" @click="onSubmit">立即创建</el-butt...
vue中 关于$emit的用法（--父子组件传值--平行组件之间this.$store.commit）
aju90208的博客
03-27 1034
组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。那么组件间如何通信，也就成为了vue中重点知识了。这篇文章将会通过props、$ref和 $emit 这几个知识点，来讲解如何实现父子组件间通信。 在说如何实现通信之前，我们先来建两个组件father.vue和child.vue作为示例的基础。 ? ...
Vue子组件向父组件传值（this.$emit()方法）
weixin_42246997的博客
02-26 1万+
子组件使用this.$emit()向父组件传值 首先必须在父组件中引用子组件，然后实现传值 第一步 在父组件中引入子组件 使用import引入组件 import indexImportOrder from './components/indexImportOrder' 声明 //定义组件 components:{ indexImportOrder, }, 使用 <in...
019、子组件向父组件传递参数 this.$emit
最新发布
༺ bestcxx的专栏 ༻
08-17 540
这里父组件通过 @fn=“clickMenu” 获得子组件的上传的参数，然后交给 clickMenu(i) 函数处理。this.$emit 是 Vue.js 中一个非常重要的方法，它允许子组件向父组件发送自定义事件，并传递数据。这里，调用子组件 hdClick 方法时，将 index 函数传递给父组件，自定义变量为 fn。data: 你要传递给父组件的数据，可以是任何类型，例如字符串、数字、对象、数组等。eventName: 你要发送的自定义事件的名称。父组件需要使用一个函数接受子组件传递来的参数。
Vue父组件调用子组件方法，报错[Vue warn]: Error in v-on handler: “TypeError: _this.$emit is not a function“
星云
09-30 9181
症状 一开始浏览器控制台报这个错[Vue warn]: Error in v-on handler: "TypeError: _this.$emit is not a function"，明显就是this指向问题，名为ajax的方法在父组件中，而this是子组件。 <!-- 子组件 --> <template> … <el-pagination layout="prev, pager, next" :page-count=
vue学习 三种常用传值方式 $emit的用法 slot与slot-scope
04-02
本篇文章将深入探讨Vue中的三种常用传值方式：props、事件($emit)以及作用域插槽(slot与slot-scope)。 1. **Props向下传递**： Props是Vue中父组件向子组件传递数据的主要方式。子组件通过props接收来自父组件的...
详解vue-router和vue-cli以及组件之间的传值
08-30
3. **创建 router 实例**：通过 `new VueRouter({ routes })` 创建一个 router 实例，并将定义好的路由对象传入。 4. **创建和挂载根实例**：在主 Vue 实例中注入 router 实例，然后挂载到 DOM 元素上，通常是在 `...
vue基础 - 11 （组件间的通信：event bus -- 事件车，$emit，$on，$off，封装一个事件车）
欢迎来到猫猫的博客 o_o ，如有问题，欢迎提出改正~
12-04 829
技术名称: event bus -- 事件车 场景： 在`头部组件`中点击搜索按钮， 需要把输入框的值传递给`商品组件` 这些组件的共同点： 同一个vue对象管理的， 这些组件中的`this.$root` (root:根源,根) 是同一个对象 Vue对象提供3个方法： - `$emit('事件名', 参数)`：触发一个事件 - `$on(监听事件名, 回调函数)`：监听指定事件触发 - `$off(监听事件)`： 删除事件的监听 例子： 1、触发事件： Header....
this.$emit()方法 Vue子组件向父组件传值
余_小凡 的博客
04-30 6172
子组件使用this.$emit()向父组件传值 第一步 在父组件中引入子组件 <indexImportOrder ref="indexImportOrder" @closeMain="closeMain"/> import indexImportOrder from './components/indexImportOrder' components:{ ...
子组件使用this.$emit()向父组件传值
qq_42772400的博客
03-25 586
子组件使用this.$emit()向父组件传值 首先必须在父组件中引用子组件，然后实现传值 第一步 在父组件中引入子组件 使用import引入组件 import indexImportOrder from ‘./components/indexImportOrder’ 声明 //定义组件 components:{ indexImportOrder, }, 使用 第二步 子组件向父组件传值 1.&...
子父传值 this.$emit
kjs--的博客
04-13 918
子组件向父组件传递数据 子组件: 需要做一个事件触发 发出一个事件(给父组件使用的事件类型) 使用this.$emit发出事件并传递数据 通过this发出的事件 只能有父组件监听(兄弟不行) this是当前的组件实例 语法： this.$emit(自定义事件类型，传递的数据) 示例: <button @click="tell">告诉我爸爸 我女朋友名字</button> methods: { tell() { this.$emit("getname", th
Vue的$emit传值
热门推荐
xiaoxiaoluckylucky的博客
03-08 1万+
$emit，父组件传data给子组件，子组件通过$emit来触发父组件中绑定在子组件身上的事件，达到改变父组件中的data的方法。下面介绍$emit传值的几种方法： 一：$emit传递单值 子组件Test.vue： <template> <div> <div>子组件</div> <button @click="changeFather">点击我向父组件传递参数</button> </div> </tem
Vue组件封装基础（父子组件传参 Props this.$emit）
qq_36770411的博客
01-10 1112
为了实现高新能、低耦合、高复用需要对常用的功能和模块进行封装成组件进行使用。
vue2中使用this.$emit向父组件传递数据（详解）
weixin_47581094的博客
09-01 549
vue2使用this.$emit实现子组件向父组件传递数据
Vue Router与Vue CLI详解：组件间数据传递策略
- 数据传递示例：父组件(app)通过`props`向下传递数据给子组件(child)和grandchild(child1)，而子组件则通过`props`接收数据。当需要改变数据时，子组件可以使用`this.$emit`触发事件，父组件监听并处理这个事件。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

b u g

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值