为了搞清楚父组件与子组件，下面我们先来搞清楚组件的创建与注册的图示过程：

这里写图片描述

看完过程后我们再来看看菜鸟教程中的vue组件实例，实例越简单越好，这是菜鸟教程中的全局组件实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="javascript/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <runoob></runoob>
    </div>
    <script>
        //第一种定义方式
        Vue.component('runoob',{
            template:'<h1>自定义组件</h1>'
        })
        new Vue({
            el:'#app'
        })

       //第二种定义方式
   /*  var component=Vue.extend({
           template:'<h1>自定义子组件</h1>'
       })

        Vue.component('runoob',component);

       new Vue({
           el:'#app'
       })*/
    </script>
</body>
</html>

显示结果：
这里写图片描述

结合上面两种定义方法，在此我顺便说一下Vue.extend与Vue.component之间的区别：

Vue.extend只是创建组件的一个构造器，你给它参数 他给你一个组件。然后作用到Vue.component 这个全局注册方法里，就如上面代码实例。

下面我们再结合上面的全局组件实例代码，来讲讲父组件与子组件。要明白这两个概念，首先要明白这二者之间的关系，我想关于父子关系在此我不用多说。结合上面代码的第一种方法来讲讲：

这里写图片描述

runoob与标签h1就是父组件与子组件之间的关系。

http://www.cnblogs.com/keepfool/p/5625583.html#top

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue