自定义组件

Vue.js的组件就是提高重用性的，让代码可复用。组件与Vue的示例类似，需要注册后才可以使用。注册有全局注册和局部注册两种方式。全局注册后，任何 Vue 实例都可以使用

在 Vue 中，一个组件本质上是一个被预先定义选项的 Vue 实例

还是直接上代码，详解在注释中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>

    <div id="app">
        <!-- 全局子组件 -->
        <my-component></my-component>
        <hr>

        <!-- 局部子组件 -->
        <jb-component></jb-component>
        <hr>

        <!-- Vue 组件的模板在某些情况下会受到 HTML 的限制，比如＜table＞内规定只允许是〈<tr>、<td> <th>等这些表格元素，所以在＜table＞内直接使用组件是无效的。 
        这种情况下，可以使用特殊的 is 属性来挂载组件， 示例代码如下：
        -->
        <!-- tbody 在渲染时， 会被替换为组件的内容。常见的限制元素还有＜ul＞、＜ol＞、＜select>  -->
        <table>
            <tr is="my-component"></tr>
        </table>
        <hr>

        <!-- 带有data函数的全局子组件 -->
        <my-component1></my-component1>
        <hr>

        <!-- 父组件传递固定数据给子组件 -->
        <my-component2 name='zhangsan'></my-component2>
        <!-- 父组件传递动态数据给子组件 -->
        <!-- 由于 HTML 特性不区分大小写，当使用 DOM 模板时，驼峰命名 CamelCase）的 props 名称要转为短横线分隔命名  -->
        <my-component2 :user-id='userId'></my-component2>

    </div>


    <script>
        //全局注册组件的方式，放到初始化Vue之前
        Vue.component('my-component', {
            //放组件内容
            //template的 DOM 结构必须被一个元素包含，如果直接写成 “这里是组件的内容”， 不带 “<div></div>”是无法渲染的
            template: '<div>这是全局组件内容</div>'
        })
        //全局子组件除了 template 选项外，组件中还可以像 Vue 实例那样使用其他的选项，比如 data、 computed、 methods 等。但是在使用 data 时， 和实例稍有区别， 
        //data 必须是函数，然后将数据 return 出去， 

        Vue.component('my-component1',{
            data() {
                return {
                    count:0
                }
            },

            template:'<button @click="count++"> You clicked me {{ count }} times. </button>'
        })

        // 接收父组件传递数据的全局子组件
        Vue.component('my-component2',{
            // props用来接收来自父组件传递过来的数据
            props:['name','userId'],
            //子控件的template中只能有一个根标签
            template:'<div><div>  {{ name }}  </div> <div>  {{ userId }}  </div></div>  '
        })
    
        //局部组件注册需要采用components
        var Child = {
            template: "<div>局部自定义组件</div>"
        }
        new Vue({
            el: "#app",
            components: {
                'jb-component': Child
            },
            data:{
                age:12,
                userId:1
            }
        })
    </script>
</body>

</html>

最后编辑于：2019.05.07 16:18:17