vue 组件通信

最近一直在加班,都没时间学习vue的知识,今天还是花点时间总结点东西吧。

1. 父组件向子组件传值

Prop

是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候,它就变成了那个组件实例的一个属性。

还是老样子,先举例子:

<template>
<!-- 父组件 -->
  <div class="app-container">
    <child :name="name" :information="information" test-name="父组件"></child>
  </div>
</template>

<script>
import Child from './Child'

export default {
  components: {
    Child
  },
  data() {
    return {
      name: 'rodchen',
      information: {
        'age': 25,
        'phone': 18700000000
      }
    }
  },
  watch: {},

  methods: {
  }
}
</script>

<style lang="scss" scoped>
</style>
<template>
  <!-- 子组件 -->
  <div class="childer-container">子组件</div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true,
      default: {},
      validator: function(value) {
        return true;
      }
    },
    information: {
      type: Object,
      required: true,
      default: {},
      validator: function(value) {
        return true;
      }
    },
    testName: {

    }
  },
  created() {
    this.name = 34
    this.information = {}
  },
  data() {
    return {};
  },
  methods: {
  }
};
</script>

<style lang="scss" scoped>
</style>

(1) props的接受方式说明

上面使用的方式是最复杂的,也是官方风格提出最好的方式。

a. props: ['name', 'information', 'testName'] //官方不推荐使用
b. props: {
    name: String,
    information: Object,
    testName: String
  }
c. props: {
    name: {
      type: String,
      required: true,
      default: {},
      validator: function(value) {
        return true;
      }
    },
    information: {
      type: Object,
      required: true,
      default: {},
      validator: function(value) {
        return true;
      }
    },
    testName: {

    }
  }

type说明:可以是下列原生构造函数中的一个,(也可以是自己构造的类型)

  • String
  • Number
  • Boolean
  • Array
  • Object
  • Date
  • Function
  • Symbol

(2) prop命名问题

相信大家发现上面testName里没有值,因为这里只是为了说明一个问题,父组件在子组件绑定其属性‘test-name’,子组件需要通过驼峰命名法来接受testName

(3) prop的初始化处理

上面的子组件的生命周期函数代码

created() {
  this.name = 34
  this.information = {}
}

子组件将prop的值进行了赋值操作,这种做法其实是错误的

上面控制台报错原因,应该避免直接对prop进行修改。

 

不需要修改prop的情况下

 data() {
    return {
      // 接受prop
      tempName: '',
      tempInformation: {},
      tempTestName: ''
    };
  }

子组件创建temp属性用于处理prop。

 

需要修改prop的情况下(出错情况说明)

<template>
  <!-- 子组件 -->
  <div class="childer-container">子组件</div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true,
      default: {},
      validator: function(value) {
        return true;
      }
    },
    information: {
      type: Object,
      required: true,
      default: {},
      validator: function(value) {
        return true;
      }
    },
    testName: {

    }
  },
  created() {
    // this.name = 34
    // this.information = {}
    this.initData()
  },
  data() {
    return {
      // 接受prop
      tempName: '',
      tempInformation: {},
      tempTestName: ''
    };
  },
  methods: {
    // prop数据初始化处理
    initData () {
      this.tempName = this.name
      this.tempInformation = this.information
      this.tempTestName = this.testName

      this.tempName = 34
      this.tempInformation.address = '子组件修改'
    }
  }
};
</script>

<style lang="scss" scoped>
</style>

上面的代码,子组件创建temp属性用于处理prop,然后子组件修改了父组件的information的address的值,会发生什么呢?

父组件代码创建create函数,控制台输出information

created () {
  console.info('++++++++++++父组件创建生命周期函数++++++++++++++')
  console.info(this.information)
}

如图可以看到当前information.address已经被修改了,这样说明:

  • JavaScript 中对象和数组是通过引用传入的,所以对于一个数组或对象类型的 prop 来说,在子组件中改变这个对象或数组本身将会影响到父组件的状态。
  • 父组件当前输出表明,父组件的创建完成在子组件之后。

 

需要修改prop的情况下(仅包含一级属性)

information: {
  'age': 25,
  'phone': 18700000000,
  'address': {
    'homeAddress': '安徽'
  }
}

information中属性划分

  • 一级属性为:age, phone, address
  • 二级属性为:homeAddress

修改上面子组件代码

<template>
  <!-- 子组件 -->
  <div class="childer-container">子组件</div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true,
      default: {},
      validator: function(value) {
        return true;
      }
    },
    information: {
      type: Object,
      required: true,
      default: {},
      validator: function(value) {
        return true;
      }
    },
    testName: {

    }
  },
  created() {
    // this.name = 34
    // this.information = {}
    this.initData()
  },
  data() {
    return {
      // 接受prop
      tempName: '',
      tempInformation: {},
      tempTestName: ''
    };
  },
  methods: {
    // prop数据初始化处理
    initData () {
      this.tempInformation = Object.assign({}, this.information)

      this.tempInformation.age = 100
      this.tempInformation.address.homeAddress = '子组件修改'
    }
  }
};
</script>

<style lang="scss" scoped>
</style>

这里得到的结论为:如果prop属性只包含一级属性,可以通过Object.assign{}的方式进行深复制,但是二级及以上属性就不行了。

 

需要修改prop的情况下(包含一级及以上属性)

需要使用下面方式进行对象的深复制。

this.tempInformation = JSON.parse(JSON.stringify(this.information))

 

Prop 传值内容

  • 属性
  • 方法
  • 父组件自己
<template>
<!-- 父组件 -->
  <div class="app-container">
    <child :property="name" @click="testFunction" :parentOwn="this"></child>
  </div>
</template>

<script>
import Child from './Child'

export default {
  components: {
    Child
  },
  created () {
  },
  data() {
    return {
      name: 'rodchen'
    }
  },
  watch: {},

  methods: {
    testFunction () {
      console.info('父组件方法')
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
<template>
  <!-- 子组件 -->
  <div class="childer-container">
    <h3>子组件</h3>
    <button @click="testFunctionTemp">测试父组件方法</button>
  </div>
  
</template>

<script>
export default {
  props: {
    property: {
      property: String,
      required: true,
      default: {},
      validator: function(value) {
        return true;
      }
    },
    parentOwn: {
      type: Object,
      required: true,
      default: {},
      validator: function(value) {
        return true;
      }
    }
  },
  created() {
    this.initData()
  },
  data() {
    return {
      // 接受prop
      tempProperty: ''
    };
  },
  methods: {
    // prop数据初始化处理
    initData () {
      this.tempProperty = this.property
      console.info(this.$parent.name)
    },

    // 测试父组件方法
    testFunctionTemp () {
      this.$emit('click')
    }
  }
};
</script>

<style lang="scss" scoped>
</style>

 

父/子组件主动获取子/父组件

对于这个就不做举例子。

父组件主动获取子组件

<child ref="children" :name="name" :information="information" test-name="父组件"></child>


this.$refs.children

子组件主动获取父组件

this.$parent.name

 

自定义事件

<child @customerEvent="click"></child>

this.$emit('customerEvent')

 

非父子组件通信

复杂的情况下,使用vuex。

需求:父组件下包含子组件和header组件,子组件内的输入框实时修改header组件的内容。

<template>
  <!-- 父组件 -->
  <div class="app-container">
    <header-component></header-component>
    <child></child>
  </div>
</template>

<script>
import Child from "./Child";
import HeaderComponent from "./Header";

export default {
  components: {
    Child,
    HeaderComponent
  },
  mounted() {},
  data() {
    return {};
  }
};
</script>

<style lang="scss" scoped>
</style>
<template>
  <!-- 子组件 -->
  <div class="childer-container">
    <h4>子组件</h4>
    <input type="text" v-model="headerTitle" @input="input">
  </div>
</template>

<script>
import VueService from "./service";

export default {
  created() {
    this.$emit("customerEvent");
  },
  data() {
    return {
      headerTitle: ""
    };
  },
  methods: {
    input(e) {
      VueService.$emit("change-header", e.target.value);
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
<template>
  <!-- header组件 -->
  <div class="childer-container">
    <h1>Header组件</h1>
    <h2>{{title}}</h2>
  </div>
</template>

<script>
import VueService from './service'

export default {
  created() {},
  mounted() {
      var self = this
      VueService.$on('change-header', function (value) {
          self.title = value
      })
  },
  destroyed () {
      VueService.off('change-header')
  },
  data() {
    return {
      title: "Headercontent"
    };
  },
  methods: {
  }
};
</script>

<style lang="scss" scoped>
</style>
// service
import Vue from 'vue'

var VueService = new Vue();

export default VueService

说明:

  • 需要创建公共文件(service)注册/注销/广播事件
  • 注册组件内如果需要直接修改本自己的属性,需要self处理

 

组件插槽

简单用法

<template>
  <!-- 父组件 -->
  <div class="app-container">
    <child>
        父组件内容
    </child>
  </div>
</template>
<template>
  <!-- 子组件 -->
  <div class="childer-container">
    <h4>子组件</h4>
     <slot></slot>
  </div>
</template>

具名插槽

<template>
  <!-- 父组件 -->
  <div class="app-container">
    <child>
        <template slot="header">
            <h1>header</h1>
        </template>

        <p>content</p>

        <template slot="footer">
            <p>footer</p>
        </template>
    </child>
  </div>
</template>
<template>
  <!-- 子组件 -->
  <div class="childer-container">
    <h4>子组件</h4>
      <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

 

 

 

 

相关推荐
简介 笔者当初为了学习JAVA,收集了很多经典源码,源码难易程度分为初级、中级、高级等,详情看源码列表,需要的可以直接下载! 这些源码反映了那时那景笔者对未来的盲目,对代码的热情、执着,对IT的憧憬、向往!此时此景,笔者只专注Android、Iphone等移动平台开发,看着这些源码心中有万分感慨,写此文章纪念那时那景! Java 源码包 Applet钢琴模拟程序java源码 2个目标文件,提供基本的音乐编辑功能。编辑音乐软件的朋友,这款实例会对你有所帮助。 Calendar万年历 1个目标文件 EJB 模拟银行ATM流程及操作源代码 6个目标文件,EJB来模拟银行ATM机的流程及操作:获取系统属性,初始化JNDI,取得Home对象的引用,创建EJB对象,并将当前的计数器初始化,调用每一个EJB对象的count()方法,保证Bean正常被激活和钝化,EJB对象是用完毕,从内存中清除,从账户中取出amt,如果amt>账户余额抛出异常,一个实体Bean可以表示不同的数据实例,我们应该通过主键来判断删除哪个数据实例…… ejbCreate函数用于初始化一个EJB实例 5个目标文件,演示Address EJB的实现 ,创建一个EJB测试客户端,得到名字上下文,查询jndi名,通过强制转型得到Home接口,getInitialContext()函数返回一个经过初始化的上下文,用client的getHome()函数调用Home接口函数得到远程接口的引用,用远程接口的引用访问EJB。 EJB中JNDI的使用源码例子 1个目标文件,JNDI的使用例子,有源代码,可以下载参考,JNDI的使用,初始化Context,它是连接JNDI树的起始点,查找你要的对象,打印找到的对象,关闭Context…… ftp文件传输 2个目标文件,FTP的目标是:(1)提高文件的共享性(计算机程序和/或数据),(2)鼓励间接地(通过程序)使用远程计算机,(3)保护用户因主机之间的文件存储系统导致的变化,(4)为了可靠和高效地传输,虽然用户可以在终端上直接地使用它,但是它的主要作用是供程序使用的。本规范尝试满足大型主机、微型主机、个人工作站、和TACs 的不同需求。例如,容易实现协议的设计。 Java EJB中有、无状态SessionBean的两个例子 两个例子,无状态SessionBean可会话Bean必须实现SessionBean,获取系统属性,初始化JNDI,取得Home对象的引用,创建EJB对象,计算利息等;在有状态SessionBean中,用累加器,以对话状态存储起来,创建EJB对象,并将当前的计数器初始化,调用每一个EJB对象的count()方法,保证Bean正常被激活和钝化,EJB对象是用完毕,从内存中清除…… Java Socket 聊天通信演示代码 2个目标文件,一个服务器,一个客户端。 Java Telnet客户端实例源码 一个目标文件,演示Socket的使用。 Java 组播组中发送和接受数据实例 3个目标文件。 Java读写文本文件的示例代码 1个目标文件。 java俄罗斯方块 一个目标文件。 Java非对称加密源码实例 1个目标文件 摘要:Java源码,算法相关,非对称加密   Java非对称加密源程序代码实例,本例中使用RSA加密技术,定义加密算法可用 DES,DESede,Blowfish等。   设定字符串为“张三,你好,我是李四”   产生张三的密钥对(keyPairZhang)   张三生成公钥(publicKeyZhang)并发送给李四,这里发送的是公钥的数组字节   通过网络或磁盘等方式,把公钥编码传送给李四,李四接收到张三编码后的公钥,将其解码,李四用张三的公钥加密信息,并发送给李四,张三用自己的私钥解密从李四处收到的信息…… Java利用DES私钥对称加密代码实例 同上 java聊天室 2个目标文件,简单。 java模拟掷骰子2个 1个目标文件,输出演示。 java凭图游戏 一个目标文件,简单。 java求一个整数的因子 如题。 Java生成密钥的实例 1个目标文件 摘要:Java源码,算法相关,密钥   Java生成密钥、保存密钥的实例源码,通过本源码可以了解到Java如何产生单钥加密的密钥(myKey)、产生双钥的密钥对(keyPair)、如何保存公钥的字节数组、保存私钥到文件privateKey.dat、如何用Java对象序列化保存私钥,通常应对私钥加密后再保存、如何从文件中得到公钥编码的字节数组、如何从字节数组解码公钥。 Java数据压缩与传输实例 1个目标文件 摘要:Java源码,文件操作,数据压缩,文件传输   Java数据压缩与传输实例,可以学习一下实例化套按字、得到文件输入流、压缩输入流、文件输出流、实例化缓冲
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页