zoukankan      html  css  js  c++  java
  • Vue学习使用系列四【父子組件通信-父传子】

    1:code

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 
     4 <head>
     5     <meta charset="UTF-8">
     6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     7     <title>Document</title>
     8     <script src="../assets/vue.js"></script>
     9 </head>
    10 
    11 <body>
    12     <div id="app">
    13         <p>prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。</p>
    14         <p>父组件的数据需要通过 props 把数据传给子组件,子组件需要显式地用 props 选项声明 "prop"</p>
    15         <p>注意: prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。</p>
    16         <hr>
    17         <paranttochild :data01="data01"></paranttochild>
    18         <paranttochild :data02="data02"></paranttochild>
    19     </div>
    20     <template id="template">
    21        <div><p>{{data01}}</p>{{data02}}</div>
    22     </template>
    23     <script>
    24         Vue.component("paranttochild", {
    25             props: ["data01", "data02"],
    26             //下面3种的使用是等同的效果
    27             // template: "<div><p>{{msg}}</p><p>{{msg02}}</p></div>" //多個的話需要一個根div
    28             // template: "#templateph" //id名稱和模板名稱相同是可以簡寫的
    29             template
    30         })
    31         var app = new Vue({
    32             el: "#app",
    33             data: {
    34                 data01: "大家好啊",
    35                 data02: "我是一熱血青年"
    36             }
    37         })
    38     </script>
    39 </body>
    40 
    41 </html>

    2:测试效果

  • 相关阅读:
    Linux菜鸟起飞之路【三】Linux常用命令
    Linux菜鸟起飞之路【二】Linux基本常识
    Linux菜鸟起飞之路【一】基本知识与Linux的安装
    交换机和路由器区别
    netdom join more ou
    keepalive.conf配置模板
    mysql7.7.22 Gtid主从搭建
    python 列表处理
    python openpyxl模块使用
    mysql5.7
  • 原文地址:https://www.cnblogs.com/Fengge518/p/13751462.html
Copyright © 2011-2022 走看看