vue组件

作者: 42个艾尔 | 来源:发表于2019-04-08 22:49 被阅读0次

Vue3.0 父子组件传值方法
provide inject在vue2和vue3中的使用
vue 组件和路由
Vue中Slots
Vue 父组件传值子组件不生效
Vue父子组件传值
Vue基础-模版语法
vue.component、vue.extend、vue
vue自定义组件
【V4】组件开发

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
        <div id="id1">

            <my-component></my-component>
            <mycomponent2></mycomponent2>
            <mycomponent3></mycomponent3>
            <test1></test1>
            <test11></test11>
            <!-- 父组件可以在引用子组件的时候，通过属性绑定的形式，把dada的数据给子组件 -->
            <test22 :parentmag="mission1">这个slot插槽是对html内容的传递</test22>
            <tesst33>
                <template v-slot:xxx="wuwu">
                    <h3 style="color: #1B6D85;" v-for="item in wuwu.mis">{{item.last}}</h3>
                </template>
                <template>
                    <h3>无效</h3>
                </template>
            </tesst33>

        </div>

        <template id="tem1">
            <h1>這個是第3种方法，在外部定义组件html结构</h1>
        </template>
        <template id="tess">
            <h1>这个是在私有属性里面经行定义</h1>
        </template>
        <template id="ttt1">
            <div>
                <slot v-bind:mis="mis" name="xxx">无主句</slot>
                <slot></slot>
            </div>
        </template>
        <script type="text/javascript">
            /*步骤一*/
            /*使用extend创建全局Vue组件*/
            var com1 = Vue.extend({
                template: '<h1>通过template属性来定义组件html结构</h1>'
            })
            /*步骤二*/
            /*Vue.component("组件的名称",组件的对象名)注册，驼峰注意转换格式，当然可以在对象里面直接写com1*/
            Vue.component("myComponent", com1)
            /*方法2 */
            /* 组件可以有自己的data 但是组件的为function,方法和实列一样 */
            Vue.component('mycomponent2', {
                template: '<h2>第二种方式{{mission}}</h2>',
                data() {
                    return {
                        mission: 'data'
                    }
                }
            })


            /*方式3*/
            Vue.component("mycomponent3", {
                template: '#tem1'
            })
            var vm = new Vue({
                el: "#id1",
                data: {
                    mission1: '父组件'
                },
                components: {
                    test1: {
                        template: '#tess'
                    },
                    test11: {
                        template: '<h1>子组件默认是无法访问父组件的data数据的{{mission1}}</h1>'
                    },
                    test22: {
                        /*  */
                        template: '<h2>使用自定义属性来传值需要{{parentmag}},<slot></slot></h2>',
                        /* 唯一一个数组，把父组件的parentmag重新定义一下方可使用，都是父组件给子组件的 */
                        props: ['parentmag']
                    },
                    tesst33: {
                        template: '#ttt1',
                        data() {
                            return {
                                mis: [{
                                    last: '解开了'
                                }, {
                                    last: '这个'
                                }]
                            }
                        }
                    }
                }
            })
        </script>
    </body>
</html>