vue中父子传值和兄弟传值

Posted 2021-06-19 嘴巴嘟嘟

直接上案列，项目结构如下

路由配置

import Vue from 'vue'
import VueRouter from 'vue-router'
// import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/index'
  },
  {
    path: '/index',
    name: 'Home',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "Home" */ '../views/Home.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

props是用于数据之间的传递（父组件向子组件），ref也可以用于数据之间的传递（ref用在子组件上，指向的是组件实例，可以理解为对子组件的索引，通过ref可能获取到在子组件里定义的属性和方法。），$emit是用于事件之间的传递（子组件触发父组件里面的方法）

父子传值

props方式

props是用于父组件向子组件传递数据信息（props是单向绑定的，即只能父组件向子组件传递，不能反向。）

Home.vue

<template>
  <div>
    <h1>欢迎来到详情列表</h1>
    <Input @add="addC"></Input>
    <MyList :listArry="list"></MyList>
  </div>
</template>

<script>
import Input from "./Input.vue";
import MyList from "./MyList.vue";
export default {
  name: "Home",
  components: { Input, MyList },
  data() {
    return {
      list: [
        {
          title: "标题1",
        },
        {
          title: "标题2",
        },
        {
          title: "标题3",
        },
      ],
    };
  },

  methods: {
    addC(title) {
      this.list.push({
        title,
      });
    },
  },
};
</script>

<style  scoped>
</style>

MyList.vue

<template>
  <div>
    <ul>
      <li v-for="(item, n) in listArry" :key="n">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "MyList",
 // props:["listArry"],//第一种方式
  props:{//第二种方式
    listArry:{
      type:Array,
      default:function(){
        return ""
      }
    }
  },
  data() {
    return {};
  },
};
</script>

<style  scoped>
</style>

Input.vue

<template>
  <div>
    <input type="text" v-model="title" />
    <button @click="addClick">添加</button>
  </div>
</template>

<script>

export default {
  name: "Input",
  data() {
    return {
      title: "",
    };
  },
  methods: {
    addClick() {
      this.$emit("add", this.title);
      this.title = "";
    },
  },
};
</script>

<style  scoped>
</style>

2.通过ref 实现通信
对于ref官方的解释是：ref 是被用来给元素或子组件注册引用信息的。引用信息将会注册在父组件的 refs 对象上。
那应该怎么理解？看看下面的解释：
1.如果ref用在子组件上，指向的是组件实例，可以理解为对子组件的索引，通过ref可能获取到在子组件里定义的属性和方法。
2.如果ref在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，通过$ref可能获取到该DOM 的属性集合，轻松访问到DOM元素，作用与JQ选择器类似。

那如何通过ref 实现通信？下面就将上面prop实现的功能，用ref实现一遍：

 <!-- 父组件 -->
    
    <template>
      <div>
        <h1>我是父组件！</h1>
        <child ref="msg"></child>
      </div>
    </template>
    
    <script>
      import child from '../components/child.vue'
      export default {
        components: {child},
        mounted: function () {
          console.log( this.$refs.msg);
          this.$refs.msg.getMessage('我是子组件一！')
        }
      }
    </script>

    <!-- 子组件 -->
     
    <template>
     <h3>{{message}}</h3>
    </template>
    <script>
     export default {
      data(){
       return{
        message:''
       }
      },
      methods:{
       getMessage(m){
        this.message=m;
       }
      }
     }
    </script>

下面再看一下ref是如何获取dom元素的

<template>
  <div id="app">
    <div ref="testDom">11111</div>
    <button @click="getTest">获取test节点</button>
  </div>
</template>

<script>
export default {
  methods: {
    getTest() {
      console.log(this.$refs.testDom)
    }
  }
};
</script>

prop和$ref之间的区别：

1.prop 着重于数据的传递，它并不能调用子组件里的属性和方法。像创建文章组件时，自定义标题和内容这样的使用场景，最适合使用prop。
2.ref 着重于索引，主要用来调用子组件里的属性和方法，其实并不擅长数据传递。而且ref用在dom元素的时候，能使到选择器的作用，这个功能比作为索引更常有用到。

兄弟之间传值

创建一个实例js文件

import Vue from 'vue'
const evenBus = new Vue();
export default evenBus

MyList.vue

Input.vue