vue父子组件的三种传值方式

函数类型的props传值

//父组件
<template><Children :getChildName="getChildName" />
</tempalte>
<script>
export default {name:"Father",data(){return{}},methods:{getChildName(name){console.log("父组件接受到Children的名字",name)}}
}
</script>

//子组件
<template><div><button @click="sendChildName">prop向父组件传值</button></div>
</tempalte>
<script>
export default {name:"Children",props:["getChildName"],data(){return{name:"小明"}},methods:{sendChildName(){this.getChildName(this.name)}}
}
</script>

通过自定义事件传值

//父组件中
<Student @getStudent="getStudentName" />

method:{getStudentName(){console.log("父组件接受到Student的名字",name)}
}

//子组件中
<template><button @click="sendStudentName">把Student名字给父组件</button>
</tempalte><script>
export default {
data(){reutrn{name:"张三"}
},
method:{sendStudentName(){this.$emit("getStudent",this.name)}
}
}

通过ref属性为子组件绑定事件

//父组件中
<Student ref="student" />
<script>
export default {
mounted(){this.$refs.student.$on('getStudent',this.sendStudentName)
},
method:{getStudentName(){console.log("父组件接受到Student的名字",name)}
}
}
</script>

//子组件中
<template><button @click="sendStudentName">把Student名字给父组件</button>
</tempalte><script>
export default {
data(){reutrn{name:"张三"}
},
method:{sendStudentName(){this.$emit("getStudent",this.name)}
}
}

vue父子组件的三种传值方式相关推荐

vue2的三种传值方式之父传子、子传父、兄弟共享数据
vue2的三种传值方式之父传子.子传父.兄弟共享数据 1. 父传子  <template><div class="app"&g ...
Vue组件的三种调用方式
最近在写fj-service-system的时候,遇到了一些问题.那就是我有些组件,比如Dialog.Message这样的组件,是引入三方组件库,比如element-ui这样的,还是自己实现一个?虽然 ...
vue 实例化几种方式_Vue组件的三种调用方式
最近在写fj-service-system的时候,遇到了一些问题.那就是我有些组件,比如Dialog.Message这样的组件,是引入三方组件库,比如element-ui这样的,还是自己实现一个?虽然 ...
vue的三种传值方式：父传子，子传父，子传子
vue 不同组件间传值方式 1 父传子 2 子传父 3 非父子传值 1.父组件向子组件进行传值(父传子) 父组件: <div><input type="text" ...
Vue创建组件的三种方式
1.使用 Vue.extend 来创建全局的Vue组件 <div id="app"><!-- 如果要使用组件,直接,把组件的名称,以 HTML 标签的形式,引入到 ...
vue.js html 相互传值,Vue 父子组件之间相互调用传值以及多层组件之间相互调用传值...
一.父子组件传值要点1:父组件赋予子组件属性值,子组件通过props 来接收值. 要点2:父组件可以通过子组件对象($ref),来调用子组件的属性以及方法要点3:子组件通过$emit 来调用父组 ...
微信小程序页面之间三种传值方式
第一种:url传值 A页面部分js代码 Page({jumpPage(e) {var zhi = 'biubiubiu~~';wx.navigateTo({url: '/pages/detail/de ...
【值传递和引用传递之外的第三种传值方式 - 传名参数】
引言先看下Scala 的以下方法该如何调用那? class Demo {val assertIsOpen = truedef test(isTrue: () => Boolean): Unit ...
ajax三种传值方式
var data=JSON.stringify({'name":name,"sex":sex}); $.ajax({ //ajax传值方式:1,url后面直接跟参数(ge ...

vue父子组件的三种传值方式

vue父子组件的三种传值方式

vue父子组件的三种传值方式相关推荐

最新文章

热门文章