模块在组件中的使用 – 安然的尾巴

内容隐藏

html案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="js/vue.js"></script>
        <title></title>
    </head>
    <body>
        <div id="app">
            <!--使用组件并且导入数据，数据随着age改变而改变-->
            <my :age="age"></my>
            <button @click='age += 1'>增加age</button>
        </div>
    </body>
    <script type="module">
        //导入模块，模块返回一个组件
        import my from './js/a.js';
        new Vue({
            el: '#app',
            data:{
                age:123
            },
            components: {
                my
            }
        })
    </script>
</html>

a.js

var mylogin = Vue.component('my', {
    //props：接收数据
    props: ["age"],
    data() {
        return {
            abc: 123
        }
    },
    //组件HTML
    template: `
        <div>
            <div>子组件的data{{abc}}</div>
            <div>来自父组件的props{{age}}</div>
        </div>
    `
})

export default mylogin;