VUE组件传值-父组件向子组件传值
你好!这是我第一次使用CSDN的博客,工程测绘方向现在的技术学习主要是为了年末毕业论文打基础,目前主要包括Html+css+JavaScript+Arcgis API+Vue。然后在学习中遇到的要点和难点希望能通过在CSDN做笔记的形式记录下里,一开始的话肯定没办法写的特别好,但是希望慢慢进步,这是一步走出去,也希望因为这样可以结识更多同道中人,大家共同进步。
我本人学习vue框架也是自学,在B站上看的一个17年的黑马视频,因为在之前我就直接上手搭建项目框架了,但是因为不熟悉vue的基础,所以代码全都写在了一个vue文件里,所以越来越乱,一狠心决定还是要把vue的组件给搞明白。然后本人学习也是属于指哪打哪,不会了就利用百度谷歌还有github,俗话称基于浏览器的对象编程,所以有不足的地方还希望大家能给些意见和建议。
父组件向子组件传值
子组件中,默认是无法访问到父组件中的data上的数据和method中的方法的。
所以需要进行以下两步操作:
(1)父组件的data中我们定义了一个msg,然后在父组件template中的child子组件标签中,通过属性绑定(v-bind)的形式,把需要传递给子组件的数据,传递到子组件内部。即代码中的v-bind:parentmsg=“msg”。
(2)把父组件传递过来的parentmsg属性,先在props数组中定义一下,这样我们就可以使用这个数据了,在子组件的template中我们就可以在div中加入我们的{{parentmsg}}了。
//父组件
<template>
<div id="app">
<child v-bind:parentmsg="msg">
</child>
</div>
</template>
<script>
import child from "../src/components/child.vue"
export default
{
name:"app",
data:function(){
return{
msg:"123是父组件中的数据"
}
},
components:{
child
}
}
//子组件
<template>
<div>
<h1> 这是一个子组件---{{parentmsg}}</h1>
</div>
</template>
<script>
export default {
data:function(){
return{
}
},
props:[
'parentmsg'
]
}
</script>
这里有两点需要注意的就是:
(1)子组件中的data数据,并不是通过父组件传递过来的,而是子组件自身私有的;
(2)组件中的,所有props中的数据,都是通过父组件传递给子组件的,props中的数据都是只读的,无法重新赋值,而data上的数据都是可读可写的。
父组件把方法传递给子组件和子组件传参
(1)首先,先在父组件的methods里面,定义一个show函数。
(2)在父组件的template里面,向子组件标签child传递方法,使用的是事件绑定机制:v-on;当我们自定义一个事件属性之后,这里是(func),那么,子组件就能够通过某些方式,调用传递进去的这个方法。
(3)在子组件的methods里面,定义一个函数myclick,用的是this.$emit这个方法,其中this指向的是这个child子组件,emit在英语原意为触发、调用的意思。
(4)在子组件的div中,写进去一个type为button的input,绑定一个click事件,这里把method中的myclick传进去。
截止这里,我们的方法就从父组件传递到了子组件,然后我们再把参数从子组件传递到父组件。
(5)在子组件的data中写入一个对象childmsg,并在methods中通过this指向这个对象。
(6)在父组件的data也写一个空对象datamsgFromchild,一开始赋值为空,并在父组件的methods中通过this指向这个对象,令它等于data,这里的data是子组件的data,因为是子组件调用的show函数,所以这里传入的参数也是子组件的data参数。
这样我们就完成了从父组件向子组件传递方法,然后再把子组件的参数传递到父组件这样一个过程。
//父组件
<template>
<div id="app">
<child v-on:func="show"></child>
</div>
</template>
<script>
import child from "../src/components/child.vue"
export default {
name:"app",
data:function(){
return{
datamsgFromchild:null
}
},
components:{
child
},
methods:{
show(data){
console.log(this.datamsgFromchild = data)
}
}
}
</script>
<template>
<div>
<h1>这是一个子组件</h1>
<input type="button" value="这是子组件中的按钮,点击它,触发父组件传递过来的func方法" @click="myclick">
</div>
</template>
<script>
export default {
data:function(){
return{
childmsg:{name:"pe7erj",age:"6"}
}
},
methods:{
myclick(){
this.$emit('func',this.childmsg)
}
}
}
</script>
这就是今天关于子父组件的一个传值关系,之后在实例运用中,有了心得体会会继续分享,因为通过这样一个简单的例子去理解这个肯定还是不够的。