vue 父子组件传值

父组件通过属性向子组件传值

单向数据流,父组件可以向子组件传值,子组件不能向父组件传值

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>vue</title>
 6     </head>
 7     <body>
 8         <div id="app">
 9             <counter :count="1" @inc="handleIncrease"></counter>
10             <counter :count="2" @inc="handleIncrease"></counter>
11             <div>{{total}}</div>
12         </div>
13
14         <!-- 开发环境版本,包含了用帮助的命令行警activeOne告 -->
15         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
16         <script>
17             var counter = {
18                 props: [‘count‘],
19                 data: function() {
20                     return {
21                         number:this.count
22                     }
23                 },
24                 template: ‘<div @click="handleClick">{{number}}</div>‘,
25                 methods: {
26                     handleClick: function() {
27                         this.number += 2;
28                         this.$emit(‘inc‘, 2)
29                     }
30                 }
31             }
32             var app = new Vue({
33                 el: ‘#app‘,
34                 data: {
35                     total: 3
36                 },
37                 components: {
38                     counter:counter
39                 },
40                 methods: {
41                     handleIncrease: function(step) {
42                         this.total += step
43                     }
44                 }
45             })
46         </script>
47     </body>
48 </html>

原文地址:https://www.cnblogs.com/1032473245jing/p/9032715.html

时间: 2024-10-07 12:13:14

vue 父子组件传值的相关文章

一个故事讲懂vue父子组件传值

作者:李佳明同学链接:https://www.jianshu.com/p/2272b6ca0f0c 一个故事讲懂vue父子组件传值 讲故事前先讲代码 父组件向子组件传值 父组件数据传递给子组件可以通过props属性来实现父组件: <template>  <div id="app">    <child-component v-bind:dataOfChild="dataOfParent"></child-component&

Vue父子组件传值

 Vue父子组件传值:有四种方式:props,ref,emit 和模板传递通信slot 通过props来传值: 静态传值就是直接通过props来传递 动态传值是通过v-bind来绑定一个要传递值的key,然后后面跟要传递的内容,不过这个内容是可以改变的 比如: <input v-model="parentMsg"> <child v-bind:message="parentMsg"></child> 传递的值会跟着input里面输

Vue 父子组件传值 props

1.Vue 的渲染周期: vue 如何实现响应式追踪. 父子组件通信有很多方式,今天单独聊下props 的方式.我们通过查找官方文档很容发现,props传值有静态和动态两种传值方式. 当然props 还提供许多验证,使数据更加严谨. 在使用父子传值时,出现了, 按照文档说明,例如: 1 <template> 2 <div v-if="data">{{parentName}} 3 4 <input type="text" v-model=

关于vue父子组件传值问题

今看到一篇关于vue传值的文章,遂记下.共勉之! /* * 父组件界面写法 */ <template> <div id="home"> <chid :sendDataToChid="words" :sendSecondData="moreWords" @fromSon="fromSon"> </child> <p>{{fromSonData}}</p> &

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" con

vue父子组件传值加例子

父传子:用prop: 子传父:1,用ref : 2 用eventBus 监听事件与触发事件: 父组件: <template><div> <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"> <el-form-item prop=&

【vue】父组件主动调用子组件 /// 非父子组件传值

一  父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="header"></v-header> <hr> 首页组件 <button @click="getChildData()">获取子组件的数据和方法</button> </div> 父组件主动获取子组件的数据和方法: 1

vue父子组件之间传值

vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种vue-cli搭建的同理 父组件通过 v-bind:属性名(自定义的) = "要传递的数据" 子组件通过 props:["属性名"]  这个属性名就是父组件传递过来的数据信息 <div id="app"> <mod :abc=&qu

vue父子组件的传值总结

久违的博客园我又回来了.此篇文章写得是vue父子组件的传值,虽然网上已经有很多了.写此文章的目的就是记录下个人学习的一部分.接下来我们就进入主题吧! 在开发vue项目中,父子组件的传值是避免不掉的. 情况一:父组件给子组件传值方法,使用props 父页面:parent.vue 1 <template> 2 <div class="sidebar_contianer"> 3 <sidebar-item :routerData="transmitDa