Vue父子传值这样理解就对了

最新推荐文章于 2024-09-15 08:19:48 发布

前端小白匠

最新推荐文章于 2024-09-15 08:19:48 发布

阅读量317

点赞数 2

文章标签： vue

本文链接：https://blog.csdn.net/qq_42805569/article/details/109940992

版权

每一个Vue实例都是一个根组件，基于根组件，我们才能建立子组件，即便子组件是定义在全局里，可是使用的时候组件标签还是要加在Vue实例管辖的区域。

所以不管是全局组件和局部组件，都是子组件，而且在Vue中，组件只有父子组件和非父子组件之分，

今天跟大家聊聊如何理解父子传值这一概念。

1.父子传值，首先父组件准备数据。

const vm = new Vue({
   el: '#app',
   data: {
      msg: '父组件的值--hello vue'
   }
})

2.建立子组件，这里设置全局组件

 Vue.component('demo',{
    template:`
    <h2>{{hello}}</h2>
    `
  })

demo就是我们的组件名，template后面跟的是模板字符串（ES6语法），放的是组件内容。

3.子组件标签写在div里,给组件标签动态绑定属性，属性值就是父组件data里面的参数值，（这个是重点），父传子，父组件只认组件标签的动态属性值，所以，这两个值务必保持一致

  <div id="app">
     <demo :hello='msg'></demo>
   </div>

4.子组件最后要在自己结构中，加上props这个属性，后面是一个数组，里面放的是自己动态绑定的属性名，属性名，子组件用的是属性名，和父组件要区分开。

  Vue.component('demo',{
    template:`
    <h2>{{hello}}</h2>
    `,
    props:['hello']
  })

看效果

完整代码献上：

<!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>
</head>
<body>
   <div id="app">
     <demo :hello='msg'></demo>
   </div>

<script src="./vue.js"></script>
<script>
  Vue.component('demo',{
    template:`
    <h2>{{hello}}</h2>
    `,
    props:['hello']
  })
const vm = new Vue({
   el: '#app',
   data: {
     msg: '父组件的值--hello vue'
   }
})
</script>
</body>
</html>

前端小白匠

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫