Vue2.x父子组件相互通信

位置:首页>文章>详情   分类: 教程分享 > Vue.js教程   阅读(2069)   2024-03-16 09:32:52

一、前言


Vue 2.x 使用期间,我们会创建众多组件,这里我们将讨论一下各个组件直接的相互通讯问题如何解决。

二、Vue 2.x组件相互通讯原理


在 Vue.js 中,父子组件的关系可以总结为 props down, events up 。
父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。看看它们是怎么工作的。

Vue 2.x组件相互通讯原理
Vue 2.x组件相互通讯原理

三、子组件

这里的子组件是模拟的一个搜索组件,包含返回、搜索等事件。
只用关注组件的值传递即可。

$title(child.vue)
<template>
  <!--搜索条-->
  <div class="search-back-section searchHead flex-between animated" :class="activeClass">
    <mu-button class="back" flat color="#444444" @click="back"><i class="fa fa-angle-left" aria-hidden="true"></i></mu-button>
    <mu-text-field
      :value="searchKeyword"
       v-model="text"
      :placeholder="'请输入:'+placeholder"
      :error-text="error"
    ></mu-text-field>
    <mu-button small class="btn" flat color="#444444" @click="search">搜索</mu-button>
  </div>
</template>

<script>
  import verify from "../assets/js/verify";

  export default {
    name: "com-search-back-section",
    props: [
      "back",         //"返回按钮"
      "searchKeyword",  //搜索关键字
      "placeholder",  //输入框提示
      "error",        //错误提示
      "activeClass",        //绑定CSS样式
    ],
    data() {
      return {
        text: "",
      }
    },
    watch:{
      searchKeyword(val){
        this.text=val;
      }
    },
    created() {
      this.text = this.searchKeyword;
    },
    methods: {
      search() {
        let msg = "";
        if (verify.isEmpty(this.text)) {
          msg = this.text;
        } else {
          msg = false;
        }
        this.$emit("search", msg);
      }
    },
  }
</script>

<style scoped>
  //样式代码与本文主题关系不大,省略
</style>

划重点

props: [
      "back",         //"返回按钮"
      "searchKeyword",  //搜索关键字----重点
      "placeholder",  //输入框提示
      "error",        //错误提示
      "activeClass",        //绑定CSS样式
    ] 

watch:{
      searchKeyword(val){
        this.text=val; //---重点
      }
    }

通过watch监视props中的属性值以及data中属性与数据的双向绑定,实现了外部数据的双向绑定。

注意:父组件中定义子组件绑定属性的名称对应的是子组件props里面定义的名称一致

search() {
        let msg = "";
        if (verify.isEmpty(this.text)) {
          msg = this.text;
        } else {
          msg = false;
        }
        this.$emit("search", msg); //---重点
      }

通过$emit向外面抛出一个回调函数传递当前组件的值数据。

四、父组件

$title(patent.vue)
<template>
其他省略---
<!--搜索框-->
<search-back-section
  :active-class="isFixedState?'isFixed fadeInDown':''"
  :back="closeFullscreenDialog"
  :searchKeyword="searchKeyword"  //-----重点
  :placeholder="'关键字'"
  @search="searchBtn"
  :error="errorText"
></search-back-section>
其他省略---
</template>

<script>
let _self=null;
export default {
  name: "door-home",
  data() {
    return {
      errorText: "",     //错误信息
      searchKeyword: "",  //关键字 
	  isFixedState:false  //用于判断css样式选择,与主题无关
  },

  created() {
    _self=this;
	this.searchKeyword='默认的值'; //---重点   会看到初始化的子组件中输入框默认值为‘默认的值’(实现了父向子传递数据)

  },

  methods: {
    /*
    * @"搜索"按钮
    * */
    searchBtn(msg) {------重点   通过子向外抛出的回调函数,子组件向父组件传递子组件中输入的内容值(实现了子向父传递数据)
      if (msg) {
        this.searchKeyword = msg;
        this.errorText = "";
      } else {
        this.errorText = "请输入关键字.";
        return false;
      }
    }
	closeFullscreenDialog(){
	
		//关闭搜索操作,与主题无关代码省略
	}
    },
};

</script>


注意:父组件中定义子组件绑定属性的名称对应的是子组件props里面定义的名称一致,传值是通过props传递所以必须一致。
例子中的 :searchKeyword="searchKeyword"
前面的searchKeyword是子组件的props定义的,后面这个是当前父组件定义的,后方这个searchKeyword可以随意其他名称

地址:https://www.leftso.com/article/503.html

相关阅读

一、前言Vue 2.x 使用期间,我们会创建众多组件,这里我们将讨论一下各个组件直接的相互通讯问题如何解决
vue打包会把vue相关的组件打包到一个文件vendor.*.js(*是个随机数)步骤一 资源引入vue最外层index.html文件引入资源文&lt;body&gtl;     &lt;di...
在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,从下面创建的一个空白项目中可以看到:​关于三个文件的说明如下:index.html---主页
vue
vue-router 中 routers 定义写法,讨论 require 的使用与否​首先上 routerindex.jsimport Vue from 'vue'import Router f...
一.vue ref基本用法:本页面获取dom元素$title(t1.vue) &lt;template&gtl; &lt;div id="app"&gtl; &lt;div r...
Vue v-if判断数组长度 searchResultDataList为vue定义的data里面的变量&lt;li  v-if="Object.keys(searchResultDataLis...
Vue 如何返回上一页(上一个锚点)//...省略 methods:{ goback:function(){ this.$router.go(-1);//...
vue
在初始化完一个vue项目(基于vue-cli 和webpack)之后,我们可以通过 npm run dev来让这个项目跑起来
1.vue项目中创建global.js创建global.js放于main.js同级目录(可自己随意放)export default {   getToken()   {     retur...
vue watch监控对象属性变化watch:{ 'object.attr':function attr(value){ //处理操作 } ...