vue的组件传值

1、父组件向子组件传值

父组件：

123456789101112

<template>
   <child :name="name"></child>
</template>
<script>
import child from "./child.vue"
  export default {
     components: {child},
     data(){
      return {name:"二哈"}
     }
  }
</script>

子组件：

12345678

<template>
  <div>{{name}}</div>
</template>
<script>
  export default {
    props:["name"]
  }
</script>



2、子组件向父组件传值

父组件：

1234567891011121314

<template>
  <child @childToParent="reviceSondata"></child>
</template>
<script>
import child from "./child.vue"
  export default {
    components: {child},
    methods:{
      reviceSondata(data){
        console.log(data);
      }
    }
  }
</script>

子组件：

1
234567891011121314151617

<template>
   <button @click="dataTofather">点击</button>
</template>
<script>
  export default {
    data () {
      return {
        message: ‘啦啦啦啦‘
      }
    },
    methods:{
      dataTofather(){
        this.$emit("childToParent",this.message,true);
      }
    }
  }
</script>



3、兄弟组件传值

可以借用公共父元素。子组件A this.$emit("eventName", data) 触发事件，父组件监听事件，更改父组件 data , 通过Props 传值到子组件B,子组件B watch Props（注意不是watch 子组件B自身data）

<el-tab-pane label="组织信息" name="second">

<el-row :gutter="30">

<el-col :span="6">

<Organization @callBackInfo="handleInfo"></Organization>

</el-col>

<el-col :span="18">

<LeaderHead :partInfo="infos" ></LeaderHead>

<PersonTable></PersonTable>

</el-col>

</el-row>

</el-tab-pane>

// 父组件

methods: {

handleClick(tab, event) {

console.log("tab 切换");

},

handleInfo(data){

console.log({prop:data})

this.infos = data

},

}

// 子组件A

methods:{

getOrganizationTree(){

this.$axios.get(

"/api/dingtalk/getDeptTree",

{ headers: { "Content-Type": "application/x-www-form-urlencoded" }

}

)

.then( res => {

var result = res.data;

if (result.success) {

console.log(result.data)

this.treeData = [result.data]

let partInfo = [

{name:"管理员:", value:"熊涛"},

{name:"会话ID:", value:"dafasdfadsfasdf"},

{name:"部门所有者:", value:"熊涛1000"}

]

this.$emit("callBackInfo", partInfo)

console.log(50050)

} else {

alert(result.message)

}

})

},

}

// 子组件B

<script>

export default {

name:"LeaderHead",

props:["partInfo"],

data(){

return {

infos:this.partInfo

}

},

watch:{

partInfo(){

console.log({PART:this.partInfo})

this.infos = this.partInfo;

}

},

mounted(){

this.infos = this.partInfo;

}

</script>

原文地址：https://www.cnblogs.com/singGirl/p/11974067.html

时间： 2024-10-09 23:30:57

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 父子组件传值

父组件通过属性向子组件传值单向数据流,父组件可以向子组件传值,子组件不能向父组件传值 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 :coun

Vue 父组件传值到子组件

vue 父组件给子组件传值中这里的AccessList就是子组件如果是静态传值的话直接 msg="xxx"就好这里动态取值的话就 :msg=xxxxx _________________________________华丽的分割线___________________________________ 子组件接收好了就这样可以直接用了原文地址:https://www.cnblogs.com/powerbyming/p/9130043.html

关于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"> <title>Title</title> </head> <body> <div id="app"> <my-alex&

vue bus组件传值

父组件 event(){ this.$bus.emit("edit", title, item);)}//edit为对应的子组件名称,title,item为向子组件传的值子组件接收在mounted this.$bus.on("edit", (title, obj) => { //title,obj为子组件接收的值 }); 子组件向父组件传值 this.$emit("refresh", addData, this.title); //

vue 子组件传值给父组件

子组件通过this.$emit("event",[args,....]),传值给父组件 HTML部分: 1 <div id="app"> 2 <tmp1 @func="test"></tmp1> 3 </div> JS部分: 1 var app = new Vue({ 2 el: "#app", 3 data: {}, 4 methods: { 5 test(data) { 6

Vue 父子组件传值 props

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