vue中的一些常用组件传值

最新推荐文章于 2024-06-18 09:00:43 发布

lazyYangn

最新推荐文章于 2024-06-18 09:00:43 发布

阅读量536

点赞数 2

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

本文链接：https://blog.csdn.net/weixin_49900638/article/details/108417554

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

vue常见组件传值方法

vue常见组件传值方法

1.父子组件传值

1.父组件向子组件传值

<div id="app">
      <Parent></Parent>
    </div>
    <script>
      //父组件=>子组件
      //1.先给父组件定义一个自定义属性
      //2.在子组件中使用props接受父组件传递的数据
      //3.拿着传递过来的数据任意在子组件中使用
      Vue.component('Parent', {
        template: `<div>
        <p>我是父组件</p>
        <Child :childData="msg">
        </Child>
        </div>`,
        data: function () {
          return {
            msg: '我是父组件的数据',
          }
        },
      })
      Vue.component('Child', {
        template: `<div>
        <p>我是子组件{{childData}}</p>
        <input type='text' v-model='childData'>
        </div>`,
        props: {
          childData: {
            type: String,
            default: '',
          },
        },
      })
      var vm = new Vue({
        el: '#app',
      })
    </script>

运行结果:

其中关于props使用:

通常写法 props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

但是，通常你希望每个 prop 都有指定的值类型。这时，你可以以对象形式列出 prop，这些 property 的名称和值分别是 prop 各自的名称和类型：

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
}

2.子组件向父组件传值

<div id="app">
      <Parent></Parent>
    </div>
    <template id="parent">
      <div>
        <p>我是父组件</p>
        <Child @func="show"></Child>
      </div>
    </template>
    <template id="child">
      <div>
        <p>我是子组件</p>
        <input type="button" value="点击我触发父组件方法" @click="childMethod" />
      </div>
    </template>
    <script>
      Vue.component('Parent', {
        template: '#parent',
        data() {
          return {
            parentMsg: '我是父组件的数据',
          }
        },
        methods: {
          show(val) {
            console.log('我是父组件的数据' + val)
          },
        },
      })
      Vue.component('Child', {
        template: '#child',
        data() {
          return {
            ChildMsg: '我是子组件的数据，我通过emit传过来了',
          }
        },
        methods: {
          childMethod() {
            this.$emit('func', this.ChildMsg)
          },
        },
      })
      new Vue({
        el: '#app',
      })
    </script>

这里的$emit('触发的父组件的事件',参数)，实际上子组件向父组件传值就是在正常触发子组件的事件方法中通过$emit()方法广播到父组件提前绑定的事件方法,注意$emit()前面必须加this。子组件传递给父组件数据的同时，父组件也向子组件传递了show的方法

这里有一个巨坑:在emit方法中要触发的的方法名一定不要大写，否则会广播失败，而且不会有任何提示
在vue中也尽量少用大写，少用驼峰，否则会默默的增加很多麻烦
效果展示:

总结:父传子->父绑定属性->子props接受
子传父->父绑定事件+声明事件->子this.$emit()广播到父绑定的事件

2.嵌套组件传值(爷孙传值)

<body>
    <!-- 嵌套组件传值 也可以一层一层绑定按照父子组件传值 但是比较麻烦 $attrs和$listeners解决了问题 -->
    <div id="app">
      <Aa></Aa>
    </div>
    <template id="A">
      <div>
        <p>我是A</p>
        <Bb :tomsg="msg" @getcdata="ashow"></Bb>
      </div>
    </template>
    <template id="B">
      <div>
        <p>我是B</p>
        <!-- 注意这里v-bind和v-on不能简写 这里的$attrs可以理解为props的集合也就是不用再props再绑定到B数据了省了中间步骤 $listeners也都一样-->
        <Cc v-bind="$attrs" v-on="$listeners"></Cc>
      </div>
    </template>
    <template id="C">
      <div id="C">
        <p>我是C</p>
        <button @click="showc">传递C数据</button>
        <h1>{{$attrs.tomsg}}</h1>
      </div>
    </template>
    <script>
      Vue.component('Aa', {
        template: '#A',
        data() {
          return {
            msg: '我是A数据',
          }
        },
        methods: {
          ashow(val) {
            console.log('我是A方法数据来自:' + val)
          },
        },
      })
      Vue.component('Bb', {
        template: '#B',
        data() {
          return {}
        },
      })
      Vue.component('Cc', {
        template: '#C',
        data() {
          return {
            fromC: '我是C的数据',
          }
        },
        methods: {
          showc() {
            this.$emit('getcdata', this.fromC)
          },
        },
      })
      new Vue({
        el: '#app',
      })
    </script>
  </body>

运行结果:
在这里插入图片描述

以上就是嵌套组件传值，如果嵌套层数增加只需要增加中间的$attrs和$listerners即可

3.兄弟组件传值

<body>
    <!-- 我们还能看到同级组件之间传值 利用bus -->
    <div id="app">
      <Aa></Aa>
    </div>
    <template id="A">
      <div>
        <Bb></Bb>
        <Cc></Cc>
      </div>
    </template>
    <template id="B">
      <div id="B">
        <p>我是B</p>
        <h1>{{cdata}}</h1>
      </div>
    </template>
    <template id="C">
      <div>
        <p>我是C</p>
        <button @click="tob">点击传递给B组件</button>
      </div>
    </template>
    <script>
      //先声明bus实例
      let bus = new Vue()
      Vue.component('Aa', {
        template: '#A',
      })
      Vue.component('Bb', {
        template: '#B',
        data() {
          return {
            cdata: '',
          }
        },
        mounted() {
          //被接受数据$on 第一个参数是事件名 第二个参数是回调函数 用来具体传值
          bus.$on('globaldata', (val) => {
            this.cdata = val
          })
        },
      })
      Vue.component('Cc', {
        template: '#C',
        data() {
          return {
            fromC: '我是C的数据',
          }
        },
        methods: {
          tob() {
            //要传值的用$emit()--发射数据 这里一定要用bus不能用this 因为this是当前组件 要放到公共对象上
            bus.$emit('globaldata', this.fromC)
          },
        },
      })
      new Vue({
        el: '#app',
      })
    </script>
  </body>

运行结果：在这里插入图片描述

以上就是兄弟组件传值(同级组件),记住要传递数据的组件是$emit()发射,被接受组件是$on接受,使用之前要先定义一个全局vue实例来放公共数据,这里的传值原理类似于找房子时的中介的关系。

以上就是我常用的组件传值方法，当然还有vue全家桶的vuex非常好用(慢慢更新中)
看完记得点赞收藏！！！

lazyYangn

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue中的一些常用组件传值

文章目录vue组件传值1.父组件向子组件传值2.子组件向父组件传值vue组件传值1.父组件向子组件传值<div id="app"> <Parent></Parent> </div> <script> //父组件=>子组件 //1.先给父组件定义一个自定义属性 //2.在子组件中使用props接受父组件传递的数据 //3.拿着传递过来的数据任意在子组件中使用
复制链接

扫一扫