Vue export default {} 函数基本结构

最新推荐文章于 2024-07-31 14:50:55 发布

Eileenym

最新推荐文章于 2024-07-31 14:50:55 发布

阅读量859

点赞数 1

文章标签： vue.js

原文链接：https://www.cnblogs.com/zhousjcn/p/12791953.html

版权

该博客详细介绍了Vue.js中组件的使用，包括组件注册、属性传递、生命周期钩子函数（created和mounted）的运用，以及如何在组件内定义数据和方法。通过实例展示了如何在父组件中触发子组件的方法。

摘要由CSDN通过智能技术生成

<script>

import Confirm from '../sub/Confirm';
export default {
        name : "First",
        // components 组件注册
        components: {
            Confirm
        },
        // 注册属性
        props: {
            name: {
                type: String,
                default: "父组件"
            },
        },
        created() {
            // created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
        },
        mounted() {
            // mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
        },
        // data() 为变量赋值等
        data() {
            return {
                msg: "Welcom to FirstApp"
            };
        },
        // methods 编写js函数
        methods: {
            getMessage(val) {
                alert(val);
            }
        }
}
</script>