【Vue.js 入门与实战】--组件传值-父组件向子组件传值和data与props的区别

简介: vm 实例也可以看成一个大的组件 ,因为也有自己的控制区域与 date。同时实例也可以看到是一个组件。

组件传值-父组件向子组件传值和dataprops的区别

 

vm 实例也可以看成一个大的组件 ,因为也有自己的控制区域与 date。同时实例也可以看到是一个组件。

var vm = new Vue({

el:’#app’,

Date:{}

Method:{}

Components:{

Com1:{

Template:’<h1>这是子组件<h1>‘

此时 vm 身上挂载了一个 com1 的子组件,所以在 vm 控制的区域内部,可以使用com1

image.png

此时右键浏览,可以正常显示,且没有报错。

如果把代码写成:

Var vm = new Vue({

el:’#app’,

Date:{}

Mag:’123 -父组件中的数据

 

此时在子组件 com1 能否访问父组件 msg 中的数据,首先,如果不考虑 vue ,在 js Component 后部分代码,代表一个子集作用域,此时子集作用域是可以访问到父集作用域的。

 

Var vm = new Vue({

el:’#app’,

Date:{}

Mag:’123 -父组件中的数据

},

Method:{}

 

Components:{

Com1:{

Template:’<h1>这是子组件---{(msg)} <h1>‘

image.png

 

执行发现,显示不全,且报错,报错内容为:property or method ”msg” is not defined on the instance ...提示我们属性或者方法中,都搜索不到 msg

//结论:经过演示发现,子组件中默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法。

但是经常会有子组件想要展示父组件的数据,此时就需要父组件向子组件传值。

<!--父组件,可以在引用子组件的时候,通过属性绑定(v-bind:)的形式,把需要传递给子组件的数据,以属性绑定的形式,传递给子组件内部,供子组件使用 -->

上面的代码中,com1 是父组件引用的,只是单纯的以一个标签的形式引用了一次,父组件在引用 com1 的时候,想要把 msg 交给子组件,让子组件去使用。

可以通过如下代码实现:

 

   <com1 v-bind:parentmsg=msg></com1>

</div>

 

此时已经把 msg传递到了子组件中,此时子组件是无法直接使用的,会提示报错,找不到以上信息。其实是因为,缺少了一个步骤:当父组件通过自定义属性传递了一些数据给子组件,子组件如果想要使用,必须按照传递时候数据的名称,再重新定义一次。

 

props:‘patentmsg’,

 

//把父组件传递过来的parentmsg属性,先在props数组中定义一下,这样才能使用这个数据。

通过数据重新定义,此时右键浏览,发现可以正常执行。

<script>

 //创建Vue实例,得到ViewModel

 Var vm = new Vue({

el:’#app’,

data: {

 mag:’123 -父组件中的数据

},

methods:{},

 

components: {

 Com1:{

   data() {

//注意:子组件中的data数据,并不是通过父组件传递过来的,而是子组件自身私有的,比如:子组件通过Ajax,请求回来的数据,都可以做到,都可以放在data身上;

   //data上的数据,都是可读可写的;

     return {

       title:’123’

       content’qqq’

     }

   },

   template:’<hl>这是子组件---{{parentmsg}}</hl>’,

 

//注意:组件中的所有props中的数据,都是通过父组件传递给子组件的

//props中的数据,都是只读的,无法重新赋值

   directives:{},

   filters: {},

   components: {}

   methods: {

     changs() {

       this.parentmsg = ‘被修改了

 }

}

 });

image.png

当前在com1 中有父组件中的 date ,还有子组件中的props 定义的内容。但提示报错,定义在 prop 上面的数据,只要被定义了,是无法被重写的。如果想要修改,需要使用 data 进行数据定义。

</script>

</body>

 

</html>

<!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>Document</title>

 <script src=”./lib/vua-2.4.0.js”></script>

</head>

 

<body>

 <div id=”app”>

这就是通过使用属性绑定,同时子组件通过 props 定义,可以实现父组件向子组件的信息传递。

再总结一下date props 的两点区别:

第一点区别:date上面的数据,是组件内部私有的,并不是父组件传递来的;props 当中的数据,是铜鼓父组件传递来的

第二点区别:props是只读的,date 是可读可写的。

 

相关文章
|
7天前
|
JavaScript
|
5天前
|
JavaScript 前端开发 API
前端框架与库 - Vue.js 组件与路由
【7月更文挑战第15天】Vue.js 框架以简洁API和高效DOM更新著名,组件和路由是构建应用的关键。组件是自包含的实例,常见问题包括命名冲突、作用域混淆和状态管理。要避免这些问题,可使用命名空间、明确数据绑定和事件,以及采用Vuex管理状态。Vue Router提供声明式路由,常见挑战包括路由守卫、动态路由参数和懒加载配置。正确使用路由守卫、处理动态参数和实现代码分割能优化路由管理。提供的代码示例展示了基本组件和路由配置。
|
14天前
vue3【实战】语义化首页布局
vue3【实战】语义化首页布局
32 2
|
14天前
|
存储 容器
vue3【实战】来回拖拽放置图片
vue3【实战】来回拖拽放置图片
22 2
|
16天前
|
存储 JavaScript 数据安全/隐私保护
vue实战——登录【详解】(含自适配全屏背景,记住账号--支持多账号,显隐密码切换,登录状态保持)
vue实战——登录【详解】(含自适配全屏背景,记住账号--支持多账号,显隐密码切换,登录状态保持)
22 1
|
16天前
|
JavaScript
vue实战——404页面模板001——男女手电筒动画
vue实战——404页面模板001——男女手电筒动画
18 1
|
15天前
|
JavaScript
vue3 【实战】封装 “心跳“ 组件
vue3 【实战】封装 “心跳“ 组件
18 0
|
15天前
vue3【实战】可撤销重做的 input 输入框
vue3【实战】可撤销重做的 input 输入框
15 0
|
16天前
|
JavaScript
Base64如何切割后面的内容,如何提取data:image/png;base64,之后的内容,Vue中.split中截取的数组如何使用数组进行获取
Base64如何切割后面的内容,如何提取data:image/png;base64,之后的内容,Vue中.split中截取的数组如何使用数组进行获取
|
16天前
|
JSON JavaScript 前端开发
vue实战——登录过期【详解】
vue实战——登录过期【详解】
20 0