【Vue】父子组件的传值（父组件--＞子组件、子组件--＞父组件）

父组件传值给子组件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body><div id="app"><!--父组件的使用--><h1>父组件：{{msg}}</h1><!--子组件的使用--><com1></com1></div><script>// com1 子组件var com1 = {template: "<h3>子组件</h3>"}var vm = new Vue({el: "#app",data: {msg: "hello--我是父组件"},methods: {},components:{com1}})</script>
</body>
</html>

对于以上案例，我们想要将Vue实例中 msg 的值传递给子组件，可以通过以下步骤：

在引用子组件的时候，把需要传递的数据通过属性绑定（v-bind:）的形式传递到子组件内部，供子组件使用。

<com1 v-bind:parentmsg='msg'></com1>

在子组件中有个 props 属性，该属性中保存的是父组件传递给子组件的数据。注意：props 中的数据，都是只读的，无法重新赋值。

var com1 = {template: "<h3>子组件：</h3>",props:['parentmsg']
}

在子组件中使用 props中保存的数据，即可获取到父组件传递的信息。

var com1 = {template: "<h3>子组件：{{parentmsg}}</h3>",props:['parentmsg']
}

子组件传值给父组件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body> <div id="app"><h3>我是父组件: {{msg}}</h3><com1 ></com1></div><template id="temp1"><div><h3 >我是子组件：{{sonmsg}}</h3><input type="button" value="调用父组件的方法"></div></template><script>var com1 = {template: "#temp1",data(){return {sonmsg:{name:'terry',age:18}}},methods: {}}var vm = new Vue({el: "#app",data: {msg:null},components: {com1}})</script>
</body>
</html>

与上面的例子相反，我们想要将子组件的数据传递给父组件，这时怎么办呢？我们可以将父组件中的方法传递给子组件调用，然后通过传参的形式来实现数据的传递效果，具体步骤如下：

首先在父组件中创建了一个 show 方法，该方法的作用是将获取的参数赋值给 Vue实例中的 data 中的 msg。

var vm = new Vue({el: "#app",data: {msg:null},methods: {show(data){this.msg = data}},components: {com1}
})

父组件向子组件传递方法是通过 v-on 绑定机制来实现的，当我们自定义了一个事件属性之后，子组件就能调用传递进去的这个方法了。

<com1 v-on:func='show'></com1>

在子组件的 methods 中定义方法。（emit 是触发，调用、发射的意思，可以来实现方法的调用及传值）

var com1 = {template: "#temp1",data(){return {sonmsg:{name:'terry',age:18}}},methods: {myclick(){this.$emit('func',this.sonmsg)}}
}

在子组件中触发方法调用，即可实现效果。

<input type="button" value="调用父组件的方法" @click='myclick'>

【Vue】父子组件的传值（父组件--＞子组件、子组件--＞父组件）相关推荐

vue中，兄弟组件之间传值
vue中,兄弟组件之间传值项目中,需要使用多个子组件,当需要传递值的时候,较为麻烦,怎样实现呢 1.一般可以使用子组件a传递给父组件,再由父组件传递给子组件b.但是一般较为麻烦, 2.使用bus作为 ...
vue2组件之间传值（数据共享）
目录 1.父组件向子组件传值 2.子组件向父组件传值: 3.子组件之间传值: 子组件之间传值第一种方法: 子组件之间传值第二种方法: 1.父组件向子组件传值自定义属性(:属性名.props) ① ...
Vue 进阶组件实战应用 -- 父子组件传值的应用实例（子父组件传值的两种触发方式）
基础的子组件和父组件通信已经搞定了,可以看此博客父子组件传值基础应用需求现在需求是在一个父页面引用子组件,不只是要实现基本的父子组件传值.并且子组件给父组件传值的触发条件要在父页面触发. 目前小 ...
vue父子组件传值之异步之后子组件无法拿到父组件传的值
在vue中父子组件传值是非常常见的,父组件给子组件传值使用的是props,子组件给父组件传值使用的是$emit 但是今天就不详细的介绍父子组件之间传值,在这里我们介绍的是子组件在异步请求回来的参数无法 ...
vue父子组件传值：详解父组件向子组件传值（props）
vue父子组件传值:父组件向子组件传值用的是props 1.定义父组件 1)父组件想要向子组件传值时,那么需要在子组件引入的地方绑定一个属性,属性值就是要传的数据,并且要在父组件中引入子组件. 2)这 ...
【Vue】组件间传值的三种方式：父传子，子传父，非父子传值
引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递.父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息,如下图所示: 1,父组件传值给子组件代码: &l ...
Vue组件化开发--组件通信方式-父传子、子传父、非父子组件传值
一.概述以脚手架搭建的Vue项目为笔记背景. 如果将所有的代码逻辑全部放到一个组件中,代码是非常的臃肿和难以维护的. 并且在真实开发中,可能会有更多的内容和代码逻辑,对于扩展性和可维护性来说都是非常 ...
vue组件间传值: 父传子、子传父、非父子组件传值
父组件向子组件传值 // 父组件通过属性将值传递给子组件 <template><div><closePopup :optionsID="optionsID&qu ...
Vue父子组件传值----$emit子传父
Vue父子组件传值是个比较经典的问题,在这里,咱们先谈一下,子组件给父组件传值. 这是一个子组件  <template><div class=& ...

【Vue】父子组件的传值（父组件--＞子组件、子组件--＞父组件）

父组件传值给子组件

子组件传值给父组件

【Vue】父子组件的传值（父组件--＞子组件、子组件--＞父组件）相关推荐

最新文章

热门文章