介绍
使用vue怎么实现父子组件间的传值?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
vue是什么 vue是一套用于构建用户界面的渐进式JavaScript框架,vue与其它大型框架的区别是,使用vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用vue可以采用单文件组件和vue生态系统支持的库开发复杂的单页应用。
& lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;才能meta charset=癠TF-8"比;
& lt;才能title> vue</title>
& lt;才能script src=癶ttps://cdn.jsdelivr.net/npm/vue"祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=癮pp"祝辞
& lt; counter :才能数=癱ount1"祝辞& lt;/counter>
& lt; counter :才能数=癱ount2"祝辞& lt;/counter>
& lt;/div>
& lt; script>
Vue.component才能(“counter",, {
,,,道具:[& # 39;计数# 39;],
,,,的数据(){
,,,,,返回{
,,,,,,,号码:,this.count,
,,,,,}
,,,},
模板:,,,,”
,,,,,& lt; p>{{数}},{{号码}}& lt;/p>
,,,”
,,});
var 才能;app =, Vue ({new
el:,,,, & # 39; #应用# 39;
数据:,,,,{
,,,,,count1:, 1,
,,,,,是从:,2,
,,,}
})才能
& lt;/script>
& lt;/body>
& lt;/html> 结果如下:
上面的代码中我们定义了一个计数器组件,并在HTML内插入了两次,分别通过:数=?“的方式将父组件内的count1和是从传入,然后我们在计数器组件内通过道具属性将计数属性接住,这样我们就将父组件的值传递给了子组件。我们就可以在模板的模板中将传过来数的数据插入,我们也可以在子组件的数据内将传过来的统计值赋值给一个新的变量数。
如果从父组件传过来的值需要参与逻辑运算时我们推荐将传入的值重新赋值给一个变量,因为子组件不允许直接修改父组件传过来的值,我们可以将传入的值赋值给新的变量,然后将该变量再传给父组件来修改父组件的值。如下代码:
& lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;才能meta charset=癠TF-8"比;
& lt;才能title> vue</title>
& lt;才能script src=癶ttps://cdn.jsdelivr.net/npm/vue"祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=癮pp"祝辞
& lt; counter :才能数=癱ount1", @change=癶andleChange"祝辞& lt;/counter>
& lt; counter :才能数=癱ount2", @change=癶andleChange"祝辞& lt;/counter>
& lt;才能p>{{总}}& lt;/p>
& lt;/div>
& lt; script>
Vue.component才能(“counter",, {
,,,道具:,(& # 39;计数# 39;),
,,,的数据(),{
,,,,,return {
,,,,,,,号码:,this.count,
,,,,,}
,,,},
,,,方法:,{
,,,,,handleClick (), {
,,,,,,,this.number + +;
,,,,,,,,美元发出(& # 39;改变# 39;,,1)
,,,,,}
,,,},
模板:,,,,”
,,,,,& lt; p @click=癶andleClick"在{{号码}}& lt;/p>
,,,”
,,});
var 才能;app =, Vue ({new
el:,,,, & # 39; #应用# 39;
数据:,,,,{
,,,,,count1:, 1,
,,,,,是从:,2,
,,,,,总:,3,
,,,},
,,,方法:,{
,,,,,handleChange(数量),{
,,,,,,,this.total =, this.total +数量
,,,,,}
,,,}
})才能
& lt;/script>
& lt;/body>
& lt;/html> 在以上代码中,我们在父组件中定义了一个总数据,初始值为count1 +是从的和。我们在子组件内定义了一个handleClick()的方法,让父组件传过来的统计值每次都+ 1,我们还在handleClick()的方法内定义了。发出(′′改变,1)的方法,它的意思是子组件通过排放(′′改变,1)的方法,它的意思是子组件通过排放属性向外触发一个改变事件,并且携带了一个参数1,然后我们在HTML的& lt; counter>标签内在父组件的方法属性内通过handleChange()方法监听这个改变事件,即@change美元和排放的事件名称自己定义,只要名称一致即可。在handleChange()方法内接收从子组件通过改变事件传过来的参数1,让后让总数据加上这个参数1即可实现一个简单的累加计算。
