1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <script src="./lib/vue.js"></script>
    10. </head>
    12. <body>
    13.     <!-- mytep定义 -->
    14.     <template id="mytmp">
    15.         <div>
    16.             <h1>这是使用template创建出来的组件,有提示和语法功能</h1>
    17.             <h3>不错,非常好用</h3>
    18.             <h1>我是子组件-------{{ title }}</h1>
    19.         </div>
    20.     </template>
    23.     <div id="app">
    24.         <!-- 调用组件,通过属性绑定的方式传递给子组件内 -->
    25.         <mycom3 v-bind:parentmsg="msg"></mycom3>
    26.     </div>
    30.     <script>
    31.         Vue.component('mycom3', {
    32.             // 组件使用一个定义了一个id为mytmp
    33.             template: "#mytmp",
    35.             // 子组件接收的父组件,必须把属性写入props列表里面,props里面都是只读的
    36.             props:['parentmsg'],
    37.             // data里面都是可读可写的,子组件的数据可以通过ajax请求回来的数据放到data身上
    38.             data:function(){
    39.                 return{
    40.                     title: "qqq",
    41.                     content: "www"
    42.                 }
    43.             }
    44.         })
    46.         var vm = new Vue({
    47.             el: '#app',
    48.             data: {
    49.                 msg:"我是父组件的msg"
    50.             },
    51.             methods: {}
    52.         });
    54.     </script>
    55. </body>
    57. </html>

    image.png