vue组件通信

于 2023-06-16 21:12:13 发布
阅读量789 收藏
点赞数
分类专栏： vue 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52963857/article/details/131240808
版权

1.1 vue组件通信

因为每个组件的变量和值都是独立的

组件通信先暂时关注父传子, 子传父

父: 使用其他组件的vue文件

子: 被引入的组件(嵌入)

例如: App.vue(父) MyProduct.vue(子)

示例演示：

说明：每个组件的变量和值都是独立的（组件数据的存放）

data()为什么是函数：

在 components 里面创建两个vue文件分别是 hello.vue，compont.vue

Hello.vue页面

<template>
    <div>
        我是hello
    </div>
</template>

compont.vue页面

需求：compont中加载子组件hello.vue

<template>
<div>
    <br>
    <Hello></Hello>
    <h2>我是compont组件内容</h2>
    <p>{{msg}}</p>
    <button @click="msg='小老儿 你好'">改变msg的值</button>
   
</div>
</template>
•
<script>
import Hello from './Hello.vue';
//这种方式可以把所有的数据都改了
// const obj={
//     msg:"我来看看我的子组件是不是健康状态"
// }
export default {
    /*
    data函数的作用：让每一个组件对象都返回一个新的对象，
        这样每一个对象都有一个新的值对象，就不会造成数据污染
    */
    data(){
       // return obj
        return{
           msg:"我来看看我的子组件是不是健康状态"
        }
    },
    components:{
        Hello
    }
}
</script>

app.vue页面：

<template>
     <div>
        <compont></compont>
        <compont></compont>
        <compont></compont>
  </div>
</template>

<script>
import Compont from './components/Compont.vue';
export default{
    data(){
        return{

        }
    },
    components:{
        Compont
    }
}
</script>

1.2 父向子-props

 从外面给组件内传值

父组件定义

<template>
<div>
    <!--使用v-bind绑定-->
    <Hello :message='msg'></Hello>
</div>
</template>

<script>
import Hello from './Hello.vue';
export default {
    data(){
        return{
           msg:"我来看看我的子组件是不是健康状态"
        }
    },
    components:{
        Hello
    }
}
</script>

子组件接收数据：

<template>
    <div>
        我是hello
        <h2>{{message}}</h2>
    </div>
</template>
<script>
export default {
    props:['message']
}
</script>

案例驱动

需求: 封装一个商品组件MyProduct.vue - 外部传入具体要显示的数据

 步骤:

  1. 创建组件components/MyProduct.vue - 复制下面标签

  2. 组件内在props定义变量, 用于接收外部传入的值

  3. App.vue中引入注册组件, 使用时, 传入具体数据给组件显示

components/MyProduct.vue - 准备标签

<template>
  <div class="my-product">
    <h3>标题: {{ title }}</h3>
    <p>价格: {{ price }}元</p>
    <p>{{ intro }}</p>
  </div>
</template>

<script>
export default {
  props: ['title', 'price', 'intro']
}
</script>

<style>
.my-product {
  width: 400px;
  padding: 20px;
  border: 2px solid #000;
  border-radius: 5px;
  margin: 10px;
}
</style>

App.vue中使用并传入数据

<template>
  <div>
    <!-- 
      目标: 父(App.vue) -> 子(MyProduct.vue) 分别传值进入
      需求: 每次组件显示不同的数据信息
      步骤(口诀):
        1. 子组件 - props - 变量 (准备接收)
        2. 父组件 - 传值进去
     -->
    <Product title="好吃的口水鸡" price="50" intro="开业大酬宾, 全场8折"></Product>
    <Product title="好可爱的可爱多" price="20" intro="老板不在家, 全场1折"></Product>
    <Product title="好贵的北京烤鸭" price="290" :intro="str"></Product>
  </div>
</template>

<script>
// 1. 创建组件 (.vue文件)
// 2. 引入组件
import Product from './components/MyProduct.vue'
export default {
  data(){
    return {
      str: "好贵啊, 快来啊, 好吃"
    }
  },
  // 3. 注册组件
  components: {
    // Product: Product // key和value变量名同名 - 简写
    Product
  }
}
</script>

<style>

</style>

组件封装复用的标签和样式, 而具体数据要靠外面传入

1.3 父向子-配合循环

把数据循环分别传入给组件内显示

<template>
  <div>
    <MyProduct v-for="obj in list" :key="obj.id"
    :title="obj.proname"
    :price="obj.proprice"
    :intro="obj.info"
    ></MyProduct>
  </div>
</template>
•
<script>
// 目标: 循环使用组件-分别传入数据
// 1. 创建组件
// 2. 引入组件
import MyProduct from './components/MyProduct.vue'
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          proname: "超级好吃的棒棒糖",
          proprice: 18.8,
          info: "开业大酬宾, 全场8折",
        },
        {
          id: 2,
          proname: "超级好吃的大鸡腿",
          proprice: 34.2,
          info: "好吃不腻, 快来买啊",
        },
        {
          id: 3,
          proname: "超级无敌的冰激凌",
          proprice: 14.2,
          info: "炎热的夏天, 来个冰激凌了",
        },
      ],
    };
  },
  // 3. 注册组件
  components: {
    // MyProduct: MyProduct
    MyProduct
  }
};
</script>
•
<style>
</style>

子类组件样式：

<template>
    <div class="my-product">
        <hello></hello>
      <h3>标题: {{ proname }}</h3>
      <p>价格: {{ proprice }}元</p>
      <p>{{ info }}</p>
    </div>
  </template>
  
  <script>
  export default {
    props: ['proname', 'proprice', 'info'],
  }
  </script>

在vue中需要遵循单向数据流原则

1. 父组件的数据发生了改变，子组件会自动跟着变
2. 子组件不能直接修改父组件传递过来的props  props是只读的

父组件传给子组件的是一个对象，子组件修改对象的属性，是不会报错的，对象是引用类型, 互相更新

1.4 单向数据流

props变量本身是只读不能重新赋值

目标：从==父到子==的数据流向,叫==单向数据流==

原因: 子组件修改, 不通知父级, 造成数据不一致性

如果第一个MyProduct.vue内自己修改商品价格为5.5, 但是App.vue里原来还记着18.8 - 数据 不一致了

所以: Vue规定==props==里的变量, 本身是只读的

 

问题: 那我怎么才能修改子组件接收到的值呢? 

其实要影响父亲, 然后数据响应式来影响儿子们

1.5 子向父

从子组件把值传出来给外面使用

需求: 砍价功能, 子组件点击实现随机砍价-1功能

语法:

  • 父: @自定义事件名="父methods函数"

  • 子: this.$emit("自定义事件名", 传值) - 执行父methods里函数代码

components/MyProduct_sub.vue

<template>
  <div class="my-product">
    <h3>标题: {{ title }}</h3>
    <p>价格: {{ price }}元</p>
    <p>{{ intro }}</p>
    <button @click="subFn">宝刀-砍1元</button>
  </div>
</template>

<script>
export default {
  props: ['index', 'title', 'price', 'intro'],
  methods: {
    subFn(){
      this.$emit('subprice', this.index, 1) // 子向父
    }
  }
}
</script>

<style>
.my-product {
  width: 400px;
  padding: 20px;
  border: 2px solid #000;
  border-radius: 5px;
  margin: 10px;
}
</style>

App.vue

<template>
  <div>
    <!-- 目标: 子传父 -->
    <!-- 1. 父组件, @自定义事件名="父methods函数" -->
    <MyProduct v-for="(obj, ind) in list" :key="obj.id"
    :title="obj.proname"
    :price="obj.proprice"
    :intro="obj.info"
    :index="ind"
    @subprice="fn"
    ></MyProduct>
  </div>
</template>

<script>

import MyProduct from './components/MyProduct_sub'
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          proname: "超级好吃的棒棒糖",
          proprice: 18.8,
          info: "开业大酬宾, 全场8折",
        },
        {
          id: 2,
          proname: "超级好吃的大鸡腿",
          proprice: 34.2,
          info: "好吃不腻, 快来买啊",
        },
        {
          id: 3,
          proname: "超级无敌的冰激凌",
          proprice: 14.2,
          info: "炎热的夏天, 来个冰激凌了",
        },
      ],
    };
  },
  components: {
    MyProduct
  },
  methods: {
    fn(inde, price){
      // 逻辑代码
      this.list[inde].proprice > 1 && (this.list[inde].proprice = (this.list[inde].proprice - price).toFixed(2))
    }
  }
};
</script>

<style>
</style>

父自定义事件和方法, 等待子组件触发事件给方法传值

1.6 阶段小结

父子组件关系-通信技术口诀

组件是什么?

  • 是一个vue实例, 封装标签, 样式和JS代码

组件好处?

  • 便于复用, 易于扩展

组件通信哪几种, 具体如何实现?

  • 父 -> 子

  • 父 <- 子

1.7 父组件访问子组件$ref

子类代码示例：Subconent.vue

<template>
    <div>
        我是子组件
        <h2>{{message}}</h2>
    </div>
</template>
<script>
export default {
   // data(){
    //     return{
    //         a:10
    //     }
    // },
    props:['message']
};
</script>

父类代码：Conents.vue

<template>
    <div>
        <!--
            父子组件访问方式
            父组件访问子组件：明确获取访问一个的话 使用$ref   vue2 中访问$children--数组类型
            子组件访问父组件 $parent 
            子组件访问根组件 $root
            ref:主要用来给元素或者子组件注册引用信息
        -->
        <Subconent :message="msg" ref="hello"></Subconent>
        <p ref="p"></p>
    </div>
</template>
<script>
import Subconent from './Subconent.vue';
export default {
    data(){
        return{
        msg:"欢迎来到我的世界"
        };
    },
    mounted(){
        console.log(this.$refs)
        //console.log(this.$refs.hello.a)
    },
    components:{
        Subconent
    }
};
</script>

1.8 子组件访问父组件内容：

父类vue

<template>
    <div>
         <!--
            子组件访问父组件 $parent  在开发中尽量少用 因为组件的复用性比较高 耦合度就高了
            子组件访问根组件 $root  使用比较多
        -->
        <hello :message="msg" :list="list"></hello>
    </div>
</template>
<script>
import Hello from './components/Hello.vue';
export default {
    data(){
        return{
           msg:"父类app展示内容布局",
           list:[1,2,3,4],
           a:20
        };
    },
    components:{
        Hello
    }
};
</script>

子类vue：

<template>
    <div>
        我是hello
        <h2>{{message}}</h2>
        <p>{{list}}</p>
    </div>
</template>
<script>
export default {
  //  props:['message']
    data(){
        return{

        }
    },
    props:{
       message:{
        //1.类型限制
        type:String,
        //2.默认值
        default:'你好',
        //3.required 必传值 不传值将会在控制台报错
        required:true
       },
       list:{
        type:Array,
        default:{
            return:[]
        }
       }
    },
    mounted(){
        //读取父类的数据 $parent  也可以读取父类单独定义的值
        console.log(this.$parent.a);
        //读取父类的根数据 $root
        console.log(this.$root);
    }
};
</script>

1.9  Vue组件：提供 provide / 注入 inject

通常，当我们需要将数据从父组件传递到子组件时，我们使用 props，假如说两个组件的关系比较复杂，你中有我，我中有他，这个你在使用父子组件通讯的方案就会很麻烦也很烦人。

对于这种情况，我们可以使用 provide 和 inject 对。父组件可以作为其所有子组件的依赖项提供程序，而不管组件层次结构有多深。这个特性有两个部分：父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始使用这个数据。

创建vue文件，root根组件App.vue, 祖先组件：HomeView ，父组件：HomeContent ，子组件：HomeHello

App.vue 加载HomeView ：

<template>
    <div>
        <HomeView></HomeView>
    </div>
</template>
<script>
import HomeView from './components/HomeView.vue';
export default {
    data(){ return{};},
    components:{ HomeView}
};
</script>

HomeView 加载父组件 HomeView ：

<template>
    <div>
        <HomeContent></HomeContent>
        <button @click="message='你好'">改变message的值</button>
        <h2>HomeView----{{message}}</h2>
    </div>
</template>
<script>
import HomeContent from './HomeContent.vue';
export default {
    data(){
        return{
            message:"HelloView"
        };
    },
    // provide:{
    //     message:"HelloView"
    // }
    /*
    provide/inject 不是响应式的  props 是响应式的
    如果想要使用this.message 方式传送数据 
     必须将provide转换为返回对象的函数
    */
   provide(){
    return{
        message:this.message
    }
   },
    components:{
        HomeContent
    }
};
</script>

父组件 HomeView 加载子组件HomeHello：

<template>
    <div>
        <HomeHello></HomeHello>
    </div>
</template>
<script>
import HomeHello from './HomeHello.vue';
export default {
    data(){ return{}; },
    components:{  HomeHello }
};
</script>

HomeHello子组件：

<template>
    <div>
        <h2>我是HomeHello子组件</h2>
        <h2>HomeHello---{{message}}</h2>
    </div>
</template>
<script>
export default {
    data(){
        return{
        };
    },
    inject:['message']
}
</script>

1.10 处理响应性

provide/inject 绑定不是被动绑定 也就是说不是响应式的 ，props 是响应式单向数据流 想要解决响应式可以通过将 ref property 或 reactive 对象传递给provide 来更改此行为

//在HomeView中 传递对象数据
<template>
    <div>
        <HomeContent></HomeContent>
        <!--第一种方式-->
        <!-- <button @click="obj.message='你好'">改变message的值</button>
        <h2>HomeView----{{obj.message}}</h2> -->
•
         <!--第二种方式-->
         <button @click="message='你好'">改变message的值</button>
        <h2>HomeView----{{message}}</h2>
    </div>
</template>
<script>
import HomeContent from './HomeContent.vue';
export default {
    data(){
        return{
            message:"HelloView",
            obj:{
                message:"HelloView"
            }
        };
    },
   provide(){
    return{
       // message:this.message
      // obj:this.obj  //第一种方式：通过响应式对象的方式
        message:()=> this.message //通过箭头函数返回响应式数据
    }
   }
    ,
    components:{
        HomeContent
    }
};
</script>

孙子组件HomeHello:

<template>
    <div>
        <h2>我是HomeHello子组件</h2>
        <!-- <h2>HomeHello---{{message}}</h2> -->
        <!--1.第一种方式-->
        <!-- <h2>HomeHello---{{obj.message}}</h2> -->

        <!--2.第二种方式-->
        <!-- <h2>HomeHello---{{message()}}</h2> -->
        <!--把上面的函数 抽离出来-->
        <h2>HomeHello---{{newMsg}}</h2>
       
    </div>
</template>
<script>
export default {
    data(){
        return{ };
    },
    //3.使用计算函数 达到缓存利用的效果
    computed:{
        newMsg(){
            return this.message()
        }
    },
    // inject:['message']
    //第一种方式
   // inject:['obj']
    //第二种方式
    inject:['message']
}
</script>

附加练习1.选中求和

把用户选中的数字, 累计求和显示

  • v-model绑定的变量是数组, 可以收集checkbox的value属性呦

数据(复制):[9, 15, 19, 25, 29, 31, 48, 57, 62, 79, 87]

<template>
  <div>
    <!-- 无id时, 可以使用index(反正也是就地更新) -->
    <div
      v-for="(item, index) in arr"
      style="display: inline-block"
      :key="index"
    >
      <input type="checkbox" v-model="checkNumArr" :value="item" />
      <span>{{ item }}</span>
    </div>
    <p>你选中的元素, 累加的值和为: {{ theSum }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [9, 15, 19, 25, 29, 31, 48, 57, 62, 79, 87],
      checkNumArr: [], //  保存用户选中的数字
    };
  },
  computed: {
    theSum() {
      return this.checkNumArr.reduce((sum, val) => {
        return (sum += val);
      }, 0);
    },
  },
};
</script>

<style>
</style>

当计算属性函数里引用的vue变量发生改变, 函数就执行并重新返回结果并缓存起来

App.vue与home.vue的区别
weixin_40945354的博客
01-06 1585
App.vue还包括底部导航。NavBar 本身包括上面图渲染的内容。router-view Home只包括明细里的内容
Vue创建注册页面
热门推荐
qq_52335038的博客
10-02 1万+
一、需求： 开发注册页面，对输入账号和昵称进行判空处理，两次密码判断是否相同，注册成功后进入到首页 二、删除一些不需要的组件 1：删除scr/views/下的About.vue和Home.vue 2.把App.vue还原成下图： <template> <div id="app"> <router-view /> </div> </template> <style lang="less"> <
home.vue
weixin_42439321的博客
01-07 747
<template> <!-- <div :search="search"> --> <div> <v-app-bar app flat > <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon> <v-toolbar-title>毕业设计</v-toolbar-title&gt
vue2项目（三）----- Home
最新发布
m0_61368323的博客
05-07 637
Home页面有7个子组件。步骤：1）创建组件（命名为TypeNav，全局组件一般放在components文件夹中）2）全局注册组件（在main.js文件中）注意：vue2和vue3全局注册都是在main.js文件中注册，但是写法不一样！！！3）使用组件（在home组件中使用TypeNav）步骤一样，先创建组件，再在Home组件中引入和注册并使用说明：1）本项目是一个前后台分离的项目前台应用与后台应用2）后台应用负责处理前台应用提交的请求并给前台应用返回json数据。
电商后台管理2-主页布局(home.vue)
ljyahaha的博客
03-29 599
1、总体布局 home.vue中template进行布局，头部区域和页面主体区域。使用了element ui的el-container el-header el-aside el-menu el-submenu el-main这些组件，需要引入element ui并注册组件。 2、获取数据 首先通过接口数据获取菜单数据，通过axios请求拦截器添加token，保证获取数据的权限。（注意：需要授权的API，必须在请求头中使用authorization字段提供token令牌，后端验证token是否正确。 im
vue组件通信传值操作示例
12-29
本文实例讲述了vue组件通信传值操作。分享给大家供大家参考，具体如下： 父子组件通信： 子组件 <h3 click=alerrt> 我是子组件一 <span>{{parentMessage}} [removed] export default{ props: ['...
kang_vue_components:vue组件通信介绍原始码-源码通
03-24
让我们深入研究Vue组件通信的几种常见方式。 1. **props向下传递**： - 在Vue中，父组件可以使用`props`将数据传递给子组件。在`props`中定义接收的数据属性，然后在子组件的模板中使用它们。 - 例如：`...
Vue组件通信之Bus的具体使用
08-28
Vue组件通信之Bus的具体使用 在Vue组件通信中，Bus扮演着非常重要的角色。Bus是一种集中式的事件中间件，它允许组件自由交流，无论组件处于组件树的哪一层。在Vue 2.0中，$dispatch和$broadcast已经被弃用，官方...
Vue组件通信的四种方式汇总
08-28
本文将详细介绍Vue组件通信的四种常见方法：父子组件通信、非父子组件的EventBus通信、使用localStorage或sessionStorage以及Vuex状态管理。 **1. 父子组件通信** 父子组件通信是最基础的通信方式，主要包括数据从...
Home.vue的代码
weixin_40945354的博客
10-26 203
错误的 <template> </template> <script> import router from router export default { } </script> 正确的： <template> <div>主页面</div> </template> <script> //import router from router export defaul
去哪儿网首页分析 Home.vue
qq_41919456的博客
08-08 1578
一、首页 Home.vue 1、首页总体分析 1）首页Home.vue 要在router——>index.js中引入 2）首页的各个部分放在组件 components 中，每写一个组件都要在Home.vue中引入并使用 3）首页写了6个组件，分别是Header头部、Swiper轮播图、Icons图标菜单、Recommend推荐板块、Weekend周末板块以及Footer底部 2、首页轮播图制作 Swiper.vue 1）借助第三方轮播插件vue-awesome-swiper 2）安装 npm i
Vue主页面功能详情
weixin_45065754的博客
03-12 2962
1、首先配置好主页面 Home.vue: <template> <el-container class="home-container"> <!-- 头部区域 --> <el-header> <div> <img src="../assets/logo.png" alt="" /> <span>后台管理系统</span> </di
建立Home页面的路由，App.vue页面的变化，去与留
weixin_40945354的博客
06-23 345
原来，以及我的猜想 <template> <img alt="Vue logo" src="./assets/logo.png" /> <HelloWorld msg="Hello Vue 3 + Vite" /> <router-view></router-view> </template> <script setup> //import HelloWorld from './components/Hello
(最详细)VueApp项目实战 - - 项目环境搭建
yuan
12-17 3293
一、项目环境准备 1.Node.js a. 官网下载安装包：Node.js中文官网 b. 安装检测：Windows系统打开cmd命令行, Mac系统打开终端 node -v # 输入后回车 v14.15.1 # 出现版本号, 则表示'Node.js'安装成功 npm -v # 输入后回车(检测'Node.js'的包管理工具是否自动安装) 6.14.8 # 出现版本号, 说明安装成功 2.Vue脚手架( Vue-CLI ) a. 查看Vue官方文档：Vue-CLI脚手架 强调!!! 此项目运用的是Vu
Vue简单创建一个项目（三）
weixin_44460248的博客
06-06 213
组件，可以看成是一个可以拿来调用的模块。 什么是组件？每一个.vue文件就是一个组件，做项目的时候可以把它们放到src文件夹下的components文件夹下，举例在App.vue中使用： 引用方法： import Home from "./components/Home.vue" 挂载注册方法： data:{},components:{'v-home':Home} 在template模板中使...
Vue入门（五）—— 创建主页，并配置路由
什么都干的派森
02-29 3822
1.在component目录下新建home.vue，代码如下： <template> <div> 主页 </div> </template> <script> export default { } </script> <style lang="less" scoped> </style&g...
vue 组件之间的传值
小葵坤_易安的博客
03-25 271
1.父组件给子组件传值 在父组件上绑定属性，在子组件里面接受传值（props） 传值、传对象、传方法 可在接受传值的时候，规定传值的类型 例1：父组件为APP.vue,子组件为Home.vue APP.vue： <template> <div id="app"> <div class="par_b"> <p>{{msg}}&...
[VUE+Leaflet开发案例一][海洋环境监测系统] 第5章 添加home.vue首页面组件
liu2004051957的博客
04-10 150
本系列文章的主题是详细分享一个基于VUE+Leaflet应用框架的WebGIS前端系统开发案例，从应用场景、开发技术、开发环境、开发调试、功能开发、系统发布等多个开发过程进行详细讲解及代码分享。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值