0
点赞
收藏
分享

微信扫一扫

浅谈Vue 2.x当中组件之间传值方式

天行五煞 2022-07-27 阅读 104
数据html自定义Linux系统/运维

一、父子之间传值

1、 父传子 ：props 

<!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>
</head>
<body>
  <div id="app">
    <my-list :list="list" :num="list.length"></my-list>
    <hr />
    <my-list></my-list>
  </div>
</body>
<template id="list">
  <ul>
    <li v-for="(item, index) of list" :key = "index">
      <img :src="item.img" alt="" style="display:block;width: 150px;height: 150px;border: 1px solid #f66">
      {{ item.title }}
    </li>
  </ul>
</template>
<script src="vue.js"></script>
<script>
  const List = {
    props: {
      list: {
        type: Array,
        default: function () {
          return [
            {
              img: '1',
              title: '您还没有传值哦'
            }
          ]
        }
      }
    },
    template: '#list'
  }
  // 全局注册组件 
  // Vue.component('my-list', List)
  new Vue({
    el: '#app',
    data: {
      list: [{
        img: 'https://m.360buyimg.com/mobilecms/s750x750_jfs/t23491/230/1714105950/260598/44036572/5b680745N534fe714.jpg!q80.dpg.webp',
        title: '七匹狼中长款夹克男春季新款时尚立领外套休闲男装茄克衫 001(黑色) 175/92A(XL)'
      }, {
        img:'https://m.360buyimg.com/mobilecms/s750x750_jfs/t23386/9/1066712099/277967/615ccafb/5b4f0e3aN262237fc.jpg!q80.dpg.webp',
        title: '【官方AppleCare+版】Apple MacBook Pro 15.4英寸笔记本电脑 深空灰色 配备Touch Bar 2018新款(八代i5/16G)'
      }]
    },
    components: {
      'my-list': List
    }
  })
</script>
</html>

2、子传父 emit 

在父组件调用子组件的地方，给它绑定一个自定义的事件,事件的执行是由父组件执行，记住不要加()

在子组件定义的地方，在需要传值的函数内部，执行 this.$emit('自定义的事件名', '传递的值') ---- 触发自定义的事件

<!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>
</head>
<body>
  <div id="app">
    <h1>这里是父组件</h1>
    <h2>子组件的值是： {{ msg }}</h2>
    <my-child @to-parent="getdata"></my-child>
  </div>
</body>
<template id="child">
  <div>
    <button @click="sendData">给父组件传值</button>
  </div>
</template>
<script src="vue.js"></script>
<script>
  const Child = {
    template: '#child',
    methods: {
      sendData () {
        this.$emit('to-parent', '啦啦啦啦啊啊啦')
      }
    }
  }
  new Vue({
    el: '#app',
    data: {
      msg: ''
    },
    components: {
      'my-child': Child
    },
    methods: {
      getdata (val) {
        this.msg = val
      }
    }
  })
</script>
</html>

3、父传子 $parent 

父组件

<template>
  <div>
    <h1>父组件</h1>
    <h-child></h-child>
  </div>
</template>
<script>
  // 引入子组件
  import HChild from './Child'
  export default {
    name: 'Parent',
    components: {
      HChild
    },
    data () {
      return {
        msg: 'data from parent'
      }
    },
    methods: {
      fun () {
        console.log('parent fun')
      }
    }
  }
</script>

子组件

<template>
  <div>
    <h1>子组件</h1>
    <button @click="showParent">调用父组件的数据和方法</button>
  </div>
</template>
<script>
  export default {
    name: 'Child',
    methods: {
      showParent () {
        // 获取到所有的子组件
        console.log(this.$parent)
        // 获取指定子组件中的指定数据
        console.log(this.$parent.msg)
        // 调用子组件的方法
        this.$parent.fun()
      }
    }
  }
</script>

4、子传父 $children

子组件

<template>
  <div>
    <h1>子组件</h1>
  </div>
</template>
<script>
  export default {
    name: 'Child',
    data () {
      return {
        msg: 'msg from child'
      }
    },
    methods: {
      fun () {
        console.log('child fun')
      }
    }
  }
</script>

父组件

<template>
  <div>
    <h1>父组件</h1>
    <h-child></h-child>
  </div>
</template>
<script>
  // 引入子组件
  import HChild from './Child'
  export default {
    name: 'Parent',
    components: {
      HChild
    },
    mounted () {
      // 获取到所有的子组件，结果是一个数组
      console.log(this.$children)
      // 获取指定子组件中的指定数据
      console.log(this.$children[0].msg)
      // 调用子组件的方法
      this.$children[0].fun()
    }
  }
</script>

5、ref  （绑定字子组件上可以获取子组件中data值，绑定在dom上可获得dom元素）

父组件

<template>
    <div class="box">
        <Header >
            <div slot="left">你好</div>
            <div slot="right" @click="userFn">你好</div>
        </Header>
        <div class="content">
            <h1 ref="title" id="title">标题</h1>
            <p ref="desc" id="desc">段落描述</p>
            <button @click="getDOM">获取DOM节点</button>
            <Reftest ref="test"/>
            <button @click="getData">获取子元素数据</button>
        </div>
    </div>
</template>
<script>
  import Header from '@/mixins/header'
  import Reftest from '@/mixins/header'
  export default {
    mixins:[Header,Reftest],
    data(){
      return {
        message:'父组件'
      }
    },
    methods: {
      getDOM () {
        console.log(document.getElementById('title'))
        console.log(document.getElementById('desc'))
        console.log('----------------------')
        console.log(this.$refs.title)
        console.log(this.$refs.desc)
      },
      getData(){
        this.$refs.test.msg='奶牛'
        console.log(this.$refs.test.msg)
      },

    }
  }
</script>

子组件

<template>
  <div>
    <button @click="getData">子组件直接获取父组件的数据</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      msg: 'child-----------------------------'
    }
  },
  methods: {
    getData () {
      console.log(this.$parent.message)
    }
  }
}
</script>

6、Provide、inject （官方不推荐使用，但是写组件库时很常用）

父组件

<template>
    <div id="app">
    </div>
</template>
    <script>
        export default {
            data () {
                    return {
                        datas: [
                            {
                                id: 1,
                                label: '产品一'
                            }
                        ]
                    }
            },
            provide {
                return {
                    datas: this.datas
                }
            }
        }
    </script>

子组件

<template>
    <div>
        <ul>
        <li v-for="(item, index) in datas" :key="index">
            {{ item.label }}
        </li>
        </ul>
    </div>
</template>
    <script>
        export default {
            inject: ['datas']
        }
    </script>

 二、兄弟组件之间传值

1、利用new Vue()实例作为中央事件总线  Vue.prototype.$bus = new Vue（）

在需要接收数据的组件内部，先监听某一个自定义的事件,接收传递过来的数据

在需要传递数据的组件内部的某一个函数内，去触发 一个 自定义的事件，发送传递的数据

<!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>
</head>
<body>
  <div id="app">
    <my-content></my-content>
    <my-footer></my-footer>
  </div>
</body>
<template id="content">
  <div>
    内容 - {{ type }}
  </div>
</template>
<template id="footer">
  <ul>
    <li @click="changeContent('首页')">首页</li>
    <li @click="changeContent('分类')">分类</li>
    <li @click="changeContent('购物车')">购物车</li>
    <li @click="changeContent('我的')">我的</li>
  </ul>
</template>
<script src="vue.js"></script>
<script>
  const bus = new Vue()
  const Content = {
    template: '#content',
    data () {
      return {
        type: ''
      }
    },
    mounted () { // 用来监听点击的是哪一个
      bus.$on('footer-content', (val) => {
        this.type = val
      })
    }
  } 
  const Footer = {
    template: '#footer',
    methods: {
      changeContent (val) {
        bus.$emit('footer-content', val)
      }
    },
    mounted () {
      bus.$emit('footer-content', '首页')
    }
  }

  new Vue({
    el: '#app',
    components: {
      'my-content': Content,
      'my-footer': Footer
    }
  })
</script>
</html>

三、跨级组件通信

1、$attrs 接收除了props声明外的所有绑定属性（class、style除外）

//parent组件
<template>
    <div>
        <Son :name='name' :age='age'/>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                name: 'Eric',
                age: '20'
            }
        }
    }
</script>

//Son组件
<template>
    <div>
        //此时Son组件把从父组件传来的数据，在传给孙组件
        <GrandSon v-bind='$attrs'/>
    </div>
</template>
<script>
    export default {
        props: ['name'],
        mounted() {
            //父组件共传来连个值，一个name， 一个age，由于name被props接收了，故$attrs 只有age属性
            console.log(this.$attrs) //{age: '20'}
        }
    }
</script>

//GrandSon组件
<template>
    <div>
        这是孙组件
    </div>
</template>
<script>
    export default {
        mounted() {
            //这样父祖组件就把数据传到了孙组件
            console.log(this.$attrs) // {age: '20'}
        }
    }
</script>

　2、$listeners 接收除了带有.native事件修饰符的所有事件监听器

//parent组件
<template>
    <div>
        <Son @eventOne='eventHandler' @click.native='clickHandler'/>
    </div>
</template>
<script>
    export default {
        methods: {
            eventHandler() {
                console.log('触发了Parent中的eventHandler')
            },
            clickHandler() {
                console.log('触发了Parent中的clickHandler')
            }
        }
    }
</script>

//Son组件
<template>
    <div>
        //此时Son组件把从父组件传来的监听器，在传给孙组件
        <GrandSon v-on='$listerners'/>
    </div>
</template>
<script>
    export default {
        mounted() {
            //父组件监听了两个事件，一个eventOne， 一个click，由于click被native修饰了，故$listerners 只有eventOne事件
            console.log(this.$listerners) //{eventOne: fn}
            this.$emit('eventOne') //可以触发Parent组件中的eventHandler函数
        }
    }
</script>

//GrandSon组件
<template>
    <div>
        这是孙组件
    </div>
</template>
<script>
    export default {
        mounted() {
            //这样孙组件通过emit触发Parent组件中的监听函数
            console.log(this.$listerners) // {eventOne: fn}
            this.$emit('eventOne') //可以触发Parent组件中的eventHandler函数
        }
    }
</script>

四、通用组件传值 Vuex

不说了 vuex yyds用就完事了

 

 

 

 

长风破浪会有时，直挂云帆济沧海



举报

相关推荐

vue：父子组件之间传值，传统方式

vue.jsjavascript前端git添加行虚拟化云计算

组件之间的传值方式

vue.jsjavascript前端vue

Vue组件之间的传值

Vue自定义数据移动测试移动开发

# vue3 组件之间传值

typescript数据自定义事件Vue.js前端开发yyds干货盘点

VUE中非父子组件之间如何传值

vue前端自定义点击事件html

vue组件通信，多种传值方式

vue文学与生活Vue

Vue常见的几种组件传值方式

vue.jsjavascript前端

VUE2 组件间传值

javascript前端传值组件间传值

vue 组件传值方法2-使用$attrs实现组件传值

vue.jsApp数据作用域HarmonyOS后端开发

vue2和vue3 子组件父组件之间的传值方法

vue.js前端前端框架
0 条评论