VueJs组件之父子通讯的方式-js教程-PHP中文网

首页

web前端

js教程

VueJs组件之父子通讯的方式

不言

May 07, 2018 pm 02:57 PM

javascript vuejs 方式

这篇文章主要介绍了VueJs组件之父子通讯的方式，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下

组件（父子通讯）

一、概括

在一个组件内定义另一个组件，称之为父子组件。

但是要注意的是：1.子组件只能在父组件内部使用（写在父组件tempalte中）;

2.默认情况下，子组件无法访问父组件上的数据,每个组件实例的作用域是独立的；

那如何完成父子如何完成通讯，简单一句话：props down, events up ：父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送

父传子：Props
子传父：子：$emit(eventName) 父$on(eventName)
父访问子：ref

下面对三个进行案例讲解：

二、父传子：Props

　组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，需要通过子组件的 props 选项

　　使用Prop传递数据包括静态和动态两种形式，下面先介绍静态props

1、静态props

<script src="https://unpkg.com/vue"></script>
<p id="example">
 <parent></parent>
</p>
<script>
 //要想子组件能够获取父组件的，那么在子组件必须申明:props
 var childNode = {
  template: &#39;<p>{{message}}</p>&#39;,
  props: [&#39;message&#39;]
 }
 //这里的message要和上面props中值一致
 var parentNode = {
  template: `
   <p class="parent">
   <child message="我是"></child>
   <child message="徐小小"></child>
   </p>`,
  components: {
   &#39;child&#39;: childNode
  }
 };
 // 创建根实例
 new Vue({
  el: &#39;#example&#39;,
  components: {
   &#39;parent&#39;: parentNode
  }
 })
</script>

登录后复制

效果：

命名约定：

对于props声明的属性来说，在父级HTML模板中，属性名需要使用中划线写法

子级props属性声明时，使用小驼峰或者中划线写法都可以；而子级模板使用从父级传来的变量时，需要使用对应的小驼峰写法

上面这句话什么意思呢？

<script>
 //这里需要注意的是props可以写成[&#39;my-message&#39;]或者[&#39;myMessage&#39;]都是可以的
 //但是template里的属性名，只能是驼峰式{{myMessage}}，如果也写成{{my-message}}那么是无效的
 var childNode = {
  template: &#39;<p>{{myMessage}}</p>&#39;,
  props: [&#39;myMessage&#39;]
 }

 //这里的属性名为my-message
 var parentNode = {
  template: `
   <p class="parent">
   <child my-message="我是"></child>
   <child my-message="徐小小"></child>
   </p>`,
  components: {
   &#39;child&#39;: childNode
  }
 };
</script>

登录后复制

如果我们childNode中的myMessage改成{{my-message}}看运行结果：

2.动态props

在模板中，要动态地绑定父组件的数据到子模板的 props，与绑定到任何普通的HTML特性相类似，就是用 v-bind。每当父组件的数据变化时，该变化也会传导给子组件

 var childNode = {
  template: &#39;<p>{{myMessage}}</p>&#39;,
  props: [&#39;my-message&#39;]
    }

 var parentNode = {
  template: `
 <p class="parent">
 <child :my-message="data1"></child>
 <child :my-message="data2"></child>
 </p>`,
  components: {
   &#39;child&#39;: childNode
  },
  data() {
   return {
    &#39;data1&#39;: &#39;111&#39;,
    &#39;data2&#39;: &#39;222&#39;
   }
  }
 };

登录后复制

3、传递数字

初学者常犯的一个错误是使用字面量语法传递数值

<script src="https://unpkg.com/vue"></script>
<p id="example">
 <parent></parent>
</p>
<script>
 var childNode = {
  template: &#39;<p>{{myMessage}}的类型是{{type}}</p>&#39;,
  props: [&#39;myMessage&#39;],
  computed: {
   type() {
    return typeof this.myMessage
   }
  }
 }
 var parentNode = {
  template: `
 <p class="parent">
 <my-child my-message="1"></my-child>
 </p>`,
  components: {
   &#39;myChild&#39;: childNode
  }
 };
 // 创建根实例
 new Vue({
  el: &#39;#example&#39;,
  components: {
   &#39;parent&#39;: parentNode
  }
 })
</script>

登录后复制

结果：

因为它是一个字面 prop，它的值是字符串 "1" 而不是 number。如果想传递一个实际的 number，需要使用 v-bind，从而让它的值被当作JS表达式计算

如何把String转成number呢，其实只要改一个地方。

 var parentNode = {
  template: `
 <p class="parent">
 //只要把父组件my-message="1"改成:my-message="1"结果就变成number类型
 <my-child :my-message="1"></my-child>
 </p>`,
 };

登录后复制

当然你如果想通过v-bind想传一个string类型，那该怎么做呢？

我们可以使用动态props，在data属性中设置对应的数字1

var parentNode = {
 template: `
 <p class="parent">
 <my-child :my-message="data"></my-child>
 </p>`,
 components: {
 &#39;myChild&#39;: childNode
 },
 //这里&#39;data&#39;: 1代表就是number类型，&#39;data&#39;: "1"那就代表String类型
 data(){
 return {
  &#39;data&#39;: 1
 }
 }
};

登录后复制

三、子转父：$emit

关于$emit的用法

1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit 触发父组件的自定义事件。

子主键

<template> 
 <p class="train-city"> 
 <span @click=&#39;select(`大连`)&#39;>大连</span> 
 </p> 
</template> 
<script> 
export default { 
 name:&#39;trainCity&#39;, 
 methods:{ 
 select(val) { 
  let data = { 
  cityname: val 
  }; 
  this.$emit(&#39;showCityName&#39;,data);//select事件触发后，自动触发showCityName事件 
 } 
 } 
} 
</script>

登录后复制

父组件

<template> 
 <trainCity @showCityName="updateCity" :index="goOrtoCity"></trainCity> //监听子组件的showCityName事件。 
<template> 
<script> 
export default { 
 name:&#39;index&#39;, 
 data () { 
 return { 
  toCity:"北京" 
 } 
 } 
 methods:{ 
 updateCity(data){//触发子组件城市选择-选择城市的事件 
  this.toCity = data.cityname;//改变了父组件的值 
  console.log(&#39;toCity:&#39;+this.toCity)  
 } 
 } 
} 
</script>

登录后复制

结果为：toCity: 大连

第二个案例

<script src="https://unpkg.com/vue"></script>

 <p id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment1="incrementTotal"></button-counter>
  <button-counter v-on:increment2="incrementTotal"></button-counter>
 </p>
<script>
 Vue.component(&#39;button-counter&#39;, {
  template: &#39;<button v-on:click="increment">{{ counter }}</button>&#39;,
  //组件数据就是需要函数式，这样的目的就是让每个button-counter不共享一个counter
  data: function() {
   return {
    counter: 0
   } 
  },
  methods: {
   increment: function() {
   //这里+1只对button的值加1，如果要父组件加一，那么就需要$emit事件
    this.counter += 1;
    this.$emit(&#39;increment1&#39;, [12, &#39;kkk&#39;]);
   }
  }
 });
 new Vue({
  el: &#39;#counter-event-example&#39;,
  data: {
   total: 0
  },
  methods: {
   incrementTotal: function(e) {
    this.total += 1;
    console.log(e);
   }
  }
 });
</script>

登录后复制

详细讲解：

1：button-counter作为父主键，父主键里有个button按钮。

2:两个button都绑定了click事件，方法里： this.$emit('increment1', [12, 'kkk']);，那么就会去调用父类v-on所监听的increment1事件。

3：当increment1事件被监听到，那么执行incrementTotal，这个时候才会把值传到父组件中，并且调用父类的方法。

4：这里要注意第二个button-counter所对应的v-on:'increment2,而它里面的button所对应是this.$emit('increment1', [12, 'kkk']);所以第二个button按钮是无法把值传给他的父主键的。

示例：一个按钮点击一次那么它自身和上面都会自增1，而第二个按钮只会自己自增，并不影响上面这个。

还有就是第一个按钮每点击一次，后台就会打印一次如下：

四、ref ($refs)用法

ref 有三种用法

1.ref 加在普通的元素上，用this.ref.name 获取到的是dom元素

2.ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。

3.如何利用v-for 和ref 获取一组数组或者dom 节点

1.ref 加在普通的元素上，用this.ref.name 获取到的是dom元素

<script src="https://unpkg.com/vue"></script>

<p id="ref-outside-component" v-on:click="consoleRef">
 <component-father ref="outsideComponentRef">
 </component-father>
 <p>ref在外面的组件上</p>
</p>
<script>
 var refoutsidecomponentTem = {
  template: "<p class=&#39;childComp&#39;><h5>我是子组件</h5></p>"
 };
 var refoutsidecomponent = new Vue({
  el: "#ref-outside-component",
  components: {
   "component-father": refoutsidecomponentTem
  },
  methods: {
   consoleRef: function() {
    console.log(this.); // #ref-outside-component  vue实例
    console.log(this.$refs.outsideComponentRef); // p.childComp vue实例
   }
  }
 });
</script>

登录后复制

效果：当在p访问内点击一次：

2.ref使用在外面的元素上

<script src="https://unpkg.com/vue"></script>

<!--ref在外面的元素上-->
<p id="ref-outside-dom" v-on:click="consoleRef">
 <component-father>
 </component-father>
 <p ref="outsideDomRef">ref在外面的元素上</p>
</p>
<script>
 var refoutsidedomTem = {
  template: "<p class=&#39;childComp&#39;><h5>我是子组件</h5></p>"
 };
 var refoutsidedom = new Vue({
  el: "#ref-outside-dom",
  components: {
   "component-father": refoutsidedomTem
  },
  methods: {
   consoleRef: function() {
    console.log(this); // #ref-outside-dom vue实例
    console.log(this.$refs.outsideDomRef); // <p> ref在外面的元素上</p>
   }
  }
 });
</script>

登录后复制

效果：当在p访问内点击一次：

3.ref使用在里面的元素上---局部注册组件

<script src="https://unpkg.com/vue"></script>
<!--ref在里面的元素上-->
<p id="ref-inside-dom">
 <component-father>
 </component-father>
 <p>ref在里面的元素上</p>
</p>
<script>
 var refinsidedomTem = {
  template: "<p class=&#39;childComp&#39; v-on:click=&#39;consoleRef&#39;>" +
   "<h5 ref=&#39;insideDomRef&#39;>我是子组件</h5>" +
   "</p>",
  methods: {
   consoleRef: function() {
    console.log(this); // p.childComp vue实例 
    console.log(this.$refs.insideDomRef); // <h5 >我是子组件</h5>
   }
  }
 };
 var refinsidedom = new Vue({
  el: "#ref-inside-dom",
  components: {
   "component-father": refinsidedomTem
  }
 });
</script>

登录后复制

效果：当在click范围内点击一次：

4.ref使用在里面的元素上---全局注册组件

<script src="https://unpkg.com/vue"></script>
<!--ref在里面的元素上--全局注册-->
<p id="ref-inside-dom-all">
 <ref-inside-dom-quanjv></ref-inside-dom-quanjv>
</p>
<script>
 //v-on:input指当input里值发生改变触发showinsideDomRef事件
 Vue.component("ref-inside-dom-quanjv", {
  template: "<p class=&#39;insideFather&#39;> " +
   "<input type=&#39;text&#39; ref=&#39;insideDomRefAll&#39; v-on:input=&#39;showinsideDomRef&#39;>" +
   " <p>ref在里面的元素上--全局注册 </p> " +
   "</p>",
  methods: {
   showinsideDomRef: function() {
    console.log(this); //这里的this其实还是p.insideFather
    console.log(this.$refs.insideDomRefAll); // <input type="text">
   }
  }
 });
 var refinsidedomall = new Vue({
  el: "#ref-inside-dom-all"
 });
</script>

登录后复制

效果：当我第一次输入1时，值已改变出发事件，当我第二次在输入时在触发一次事件，所以后台应该打印两次

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7706

Java教程

1640

CakePHP 教程

1394

Laravel 教程

1288

PHP教程

1231

显示更多

Related knowledge

如何使用WebSocket和JavaScript实现在线语音识别系统 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript实现在线语音识别系统引言：随着科技的不断发展，语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统，具备了低延迟、实时性和跨平台的特点，成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系

WebSocket与JavaScript：实现实时监控系统的关键技术 Dec 17, 2023 pm 05:30 PM

WebSocket与JavaScript：实现实时监控系统的关键技术引言：随着互联网技术的快速发展，实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用，并给出代码示例，详细解释其实现原理。一、WebSocket技

如何利用JavaScript和WebSocket实现实时在线点餐系统 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket实现实时在线点餐系统介绍：随着互联网的普及和技术的进步，越来越多的餐厅开始提供在线点餐服务。为了实现实时在线点餐系统，我们可以利用JavaScript和WebSocket技术。WebSocket是一种基于TCP协议的全双工通信协议，可以实现客户端与服务器的实时双向通信。在实时在线点餐系统中，当用户选择菜品并下单

如何使用WebSocket和JavaScript实现在线预约系统 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript实现在线预约系统在当今数字化的时代，越来越多的业务和服务都需要提供在线预约功能。而实现一个高效、实时的在线预约系统是至关重要的。本文将介绍如何使用WebSocket和JavaScript来实现一个在线预约系统，并提供具体的代码示例。一、什么是WebSocketWebSocket是一种在单个TCP连接上进行全双工

JavaScript和WebSocket：打造高效的实时天气预报系统 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket：打造高效的实时天气预报系统引言：如今，天气预报的准确性对于日常生活以及决策制定具有重要意义。随着技术的发展，我们可以通过实时获取天气数据来提供更准确可靠的天气预报。在本文中，我们将学习如何使用JavaScript和WebSocket技术，来构建一个高效的实时天气预报系统。本文将通过具体的代码示例来展示实现的过程。We

简易JavaScript教程：获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程：如何获取HTTP状态码，需要具体代码示例前言：在Web开发中，经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时，我们经常需要获取返回的HTTP状态码来判断操作是否成功，根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码，并提供一些实用的代码示例。使用XMLHttpRequest

javascript中如何使用insertBefore Nov 24, 2023 am 11:56 AM

用法：在JavaScript中，insertBefore()方法用于在DOM树中插入一个新的节点。这个方法需要两个参数：要插入的新节点和参考节点（即新节点将要被插入的位置的节点）。

JavaScript和WebSocket：打造高效的实时图像处理系统 Dec 17, 2023 am 08:41 AM

JavaScript是一种广泛应用于Web开发的编程语言，而WebSocket则是一种用于实时通信的网络协议。结合二者的强大功能，我们可以打造一个高效的实时图像处理系统。本文将介绍如何利用JavaScript和WebSocket来实现这个系统，并提供具体的代码示例。首先，我们需要明确实时图像处理系统的需求和目标。假设我们有一个摄像头设备，可以采集实时的图像数

See all articles

VueJs组件之父子通讯的方式

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题