Vue父组件向子组件传值之props详解
2023-06-13 09:12:01 时间
大家好,又见面了,我是你们的朋友全栈君。
文章目录
组件实例的作用域是孤立的。这就意味着不能在子组件的模板内直接引用父组件的数据。父组件的数据需要通过
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:{
}
}
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/135060.html原文链接:https://javaforall.cn
相关文章
- 熬夜整理的vue面试题,面试加油
- vue 子组件调用父组件方法传参,父组件调用也传参_面试题vue组件封装思路
- 计算属性是如何被Vue实现的
- 使用Vue写一个登录页面
- vue组件 订单支付15分钟倒计时
- vue父子组件传值:详解父组件向子组件传值(props)
- Vue组件化编程
- VUE 如何将父组件中的数据传递到子组件中
- Vue组件通信_android组件间通信
- vue父子组件传值方法_vue父组件向子组件传递对象
- 「后端小伙伴来学前端了」Vue中Props 实现组件通信TodoList案例
- 创建一个vue项目并配置默认页面
- 瀑布流组件vue-waterfall
- vue父子组件传值props_vue子组件调用父组件的方法并传参
- 给 Vue 模态框组件添加过渡和动画效果
- Vue学习笔记之opensslErrorStack: [ ‘error:03000086:digital envelope routines::initialization error‘ ]的问题
- JavaWeb Day11 Vue快速入门
- Vue 组件间通信的几种方式
- Vue组件插槽的使用
- vue入门篇之Vue.js 组件
- Vue2.0 搭建Vue脚手架(vue-cli)详解编程语言
- Vue极致集成Redis,实现更优秀的性能(vue集成redis)
- 优化网站性能,Vue搭配Redis缓存更加有效(vue使用redis缓存)
- 构建基于Vue与Redis的高性能缓存系统(VUE redis缓存)
- Oracle Vue考场助力企业数据库技术突破(oracle vue考场)