Vue组件传值之父传子

最新推荐文章于 2024-03-25 13:01:07 发布

Lukeyyyy

最新推荐文章于 2024-03-25 13:01:07 发布

阅读量200

点赞数 1

分类专栏： vue 文章标签： vue js 组件化

本文链接：https://blog.csdn.net/Luceyyy/article/details/110209675

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>

    <div id="app">
        //使用  ":" 也就是 v-band的方法把父组件的data属性传给子组件
        <v-one :values="msg"></v-one>

    </div>
    <template id="temp1">
        <div>
            我是子组件的内容
            //使用父传过来的data属性
            {{values}}
            
        </div>
    </template>
    <script src="../vue.js"></script>

*注意: 子组件不可以更改父组件中data属性的值
可以更改成功,但是会报错!
如果需要更改,父组件的data属性需要放在对象中传递

 <script>
 //下面是子组件:
     var vOne = {
         template: "#temp1",
       
         },
         // 用 : 也就是 v-band 方法传过来的data属性 要放在 props中 子组件才可以使用
         props: ["values"]

     }
  ```

//下面是父组件:
      let vm = new Vue({
          el: '#app',
          data: {
              msg: "父组件的属性"
          },
         
          },
          components: {
              vOne
          }
      });
  </script>
</body>

</html>