Vue父组件向子组件传值之props详解

Vue父组件向子组件传值之props详解文章目录子组件必须通过props访问父组件数据注意:JavaScript中使用驼峰命名,HTML中使用短横线分割命名子组件中的data组件中的props子组件不能修改父组件中的数据组件实例的作用域是孤立的。这就意味着不能在子组件的模板内直接引用父组件的数据。父组件的数据需要通过props才能下送到子组件中。子组件必须通过props访问父组件数据一个组件可以直接在模板里面…

大家好,又见面了,我是你们的朋友全栈君。

组件实例的作用域是孤立的。这就意味着不能在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 props 才能下送到子组件中。

子组件必须通过 props 访问父组件数据

  • 一个组件可以直接在模板里面渲染 data 中的数据(双大括号)
  • 子组件不能直接在模板中渲染父组件的数据。
  • 如果子组件想引用父组件的数据,可以在引用子组件的时候,通过 属性绑定(v-bind:) 的形式,把需要传递给子组件的数据,以属性绑定的形式传递到子组件的内部,供子组件使用。然后再把传递过来的 属性 ,在 props数组 中定义一下,这样才能使用父组件中的数据。
    简单例子:
<!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' content='ie=edge'>
<title></title>
<script src='../lib/vue.js'></script>
</head>
<body>
<div id='app'>
<!-- 父组件,可以在引用子组件的时候,通过 属性绑定(v-bind:)的形式,把需要传递给子组件的数据,以属性绑定的形式传递到子组件的内部,供子组件使用 -->
<com1 :parent-msg="msg"></com1>
</div>
<script> var vm = new Vue({ 
 el: '#app', data: { 
 msg: '我是父组件中的数据' }, methods: { 
}, components: { 
 com1: { 
 data() { 
 //注意:子组件中的 data 数据,并不是通过 父组件传递过来的,而是子组件 // 自身私有的,比如:子组件通过啊 ajax ,请求回来的数据,都可以放到 data 身上 // data 上的数据,都是可读可写的(双向的) return { 
 title: '123', content: 'hhh' } }, template: '<h1 @click="change">这是子组件 ---{ 
{parentMsg}}</h1>', // 注意:组件中的 所有 props 中的数据,都是通过 父组件传递给子组件的 // 注意:props 中的数据,都是只读的,无法重新赋值 props: ['parentMsg'], //把父组件传递过来的 parentMsg 属性,在 props 数组中 定义一下,这样,才能使用这个数据 methods:{ 
 change(){ 
 this.parentMsg="修改了"; //可以运行,点击过,会报错,因为 props 只读的 } } } } }) </script>
</body>
</html>

注意:

JavaScript中使用驼峰命名,HTML中使用短横线分割命名
  <div id='app'>        
<com1 :parent-msg="msg"></com1>
</div>
<script>
var vm = new Vue({ 

el:"#app",
data:{ 
我是父组件中的数据},
components: { 

com1: { 

// 在引用组件绑定属性的时候,以短横线命名,则在JavaScript中渲染的时候,用驼峰命名法
template: '<h1 @click="change">这是子组件 ---{ 
{parentMsg}}</h1>',
data() { 

return { 

title: '123',
content: 'hhh'
}
},
props: ['parentMsg'],
methods:{ 

change(){ 

this.parentMsg="修改了" //可以运行,点击过,会报错,因为 props 只读的
}
}
}
}
})
</script>

子组件中的 data

子组件中的 data 数据,并不是通过 父组件传递过来的,而是子组件 自身私有的,比如:子组件通过啊 ajax ,请求回来的数据,都可以放到 data 身上data 上的数据,都是可读可写的(双向的)


组件中的 props

组件中的 所有 props 中的数据,都是通过 父组件传递给子组件的 ,注意:props 中的数据,都是只读的(单向),无法重新赋值


子组件不能修改父组件中的数据
  components: { 

com1: { 

template: '<h1 @click="change">这是子组件 ---{ 
{parentMsg}}</h1>',
props: ['parentMsg'],
methods:{ 

change(){ 

this.parentMsg="修改了";	 //可以运行,点击过,会报错,因为 props 只读的
}
}
}
}

当你点击之后,运行完,在控制台输出一下错误:
在这里插入图片描述

更简单易理解的例子:

简单可以理解为,在父组件通过给子组件绑定属性的方式传值,在子组件中用props:[‘xxx’,‘xxx’] 接收,然后在子组件中直接通过 this.xxx 得到父组件出过来的数据


父组件

//父组件通过绑定属性的方式传值
<numberbox :min="1" :max="100" :initCount="1"></numberbox>

子组件

//子组件通过props接收
export default { 

props:["min","max","initCount"],
create(){ 

console.log(this.max)
},
data(){ 

return{ 
}
},
methods:{ 
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/135060.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Android使用ViewPager实现左右循环滑动及轮播效果

    边界的时候会看到一个不能翻页的动画,可能影响用户体验。此外,某些区域性的ViewPager(例如展示广告或者公告之类的ViewPager),可能需要自动轮播的效果,即用户在不用滑动的情况下就能够看到其

    2021年12月27日
  • 焦点科技怎么老是招人_苹果链,蓝思科技,歌尔股份,立讯精密,欧菲光,谁是老大?…

    焦点科技怎么老是招人_苹果链,蓝思科技,歌尔股份,立讯精密,欧菲光,谁是老大?…苹果链在6月初到7月中旬走了一波行情,目前又到了反复阶段,在大盘逐步整理,又回到结构性的状态的弱势时期,在资金在板块之间游离的情况下,不少投资者把目光关注到近期没有震荡,保持一定平稳的板块,不少投资者就注意到了苹果链板块上,那么这几只个股,究竟谁是老大?蓝思科技大家好,我是蓝思科技,我主营中高端视窗防护玻璃面板、外观防护新材料的研发、生产。不忙,这只我基本的操作,算不上什么,仔细看着大家,我有玻璃…

  • List KeyValuePair

    List KeyValuePairList<KeyValuePair<string,string>>list=newList<KeyValuePair<string,string>>();list.Add(newKeyValuePair<string,string>(“asdf1″,”1”));list.Add(newKeyValuePair&l…

  • .NET控件名称缩写一览表「建议收藏」

    .NET控件名称缩写一览表「建议收藏」.NET控件名称缩写一览表

  • 服务降级方案

    服务降级方案    开发高并发系统时有三把利器用来保护系统:缓存、降级和限流。本文将详细聊聊降级。     为什么需要降级:当访问量剧增、服务出现问题(如响应时间慢或不响应)或非核心服务影响到核心流程的性能时,仍然需要保证服务还是可用的,即使是有损服务。      降级的最终目:保证核心服务可用,即使是有损的。而且有些服务是无法降级的(如加入购物车、结算)    …

  • 刚刚弄的51cto 谢谢我的兄弟

    刚刚弄的51cto 谢谢我的兄弟

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号