欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue组件传值之 父传子

程序员文章站 2022-06-19 13:07:00
Document
<!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>

本文地址:https://blog.csdn.net/Luceyyy/article/details/110209675

相关标签: vue js 组件化