Vue的高级语法

一。组件

把页面中通用的部分做成组件，减低开发成本

先定义组=====>   再注册组件  ===========> 再组件通信

①定义组件

语法：  注意组件中data是一个函数

// 定义组件
const 组件对象 = {
    // 渲染模板
    template : ``,
    // 组件数据 (必须是一个函数)
    data : function () {
        return {  
        }
    },
    // 组件属性
    props : {
    },
    // 计算属性
    computed : {
    },
    // 方法
    methods : {
    },
    // 监控属性
    watch : {
    },
    // 生命周期钩子
    created (){
    }
};

　　使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs定义组件</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
    </div>
    <script type="text/javascript">
        // 定义组件
        const MyButton = {
            // 渲染模板
            template : `<button @click="calc()">你点击了: {{num}}次！</button>`,
            // 组件数据 (必须是一个函数)
            data : function () {
                return {
                    num: 1
                }
            },
            // 方法
            methods : {
                calc : function () {
                    this.num++;
                }
            }
        };
	   // 创建Vue实例
        var vue = new Vue({
            el : '#app', // 渲染的html元素
            data : { // 数据对象
            }
        });
    </script>
</body>
</html>

扩展：对于组件名，有两种写法

一种是　：zu-jian

一种是 ： ZuJian 

但是，无论哪种，再使用组件的时候都是用<zu-jian />

 

②注册组件

分为：全局组件和局部组件

全局组件： Vue.component('组件名称', 组件对象);     可以用在所有的 Vue 实例 (new Vue) 中。

局部组件：          只能在当前的Vue实例中可以使用。

components : {
"my-button" : MyButton
}

 

③组件通信

第一种：父组件向子组件通信：----------------通过 Prop 向子组件传递数据------通过传递属性来进行通信 (在子组件中定义父组件需要传递的属性)

 

posted @ 2020-07-27 12:18  lanto_liang  阅读(153)  评论(0)  编辑  收藏  举报