vue教程2-组件化开发

最新推荐文章于 2024-04-12 05:09:32 发布

weixin_34228617

最新推荐文章于 2024-04-12 05:09:32 发布

阅读量192

点赞数

文章标签： javascript python ViewUI

原文链接：http://www.cnblogs.com/jabbok/p/10644423.html

版权

全局组件

    <div id="app">
        <cs1></cs1>
    </div>
      
    <script>

    Vue.component('cs1',{
            data(){return {count:0}},
            template:'<button @click="count++">this is global component {{ count }}</button>'
        }
        )

        new Vue({
            el: '#app',
        }
        )
    </script>
#在组件开发中，data用data(）{}函数，如果用参数，会在不同组件之间混用。
#组件cs1会把<cs1></cs1>替换掉。

props

    <div id="app">
        <!-- cs1组件可以复用，每次创建一个vue实例 -->
        <cs1 title="jdango入门"></cs1>
        <cs1 title="python入门"></cs1>
        <cs1 title="vue入门"></cs1>
    </div>
      
    <script>

    Vue.component('cs1',{
            // 父组件cs1的数据通过props传给子组件
            // 子组件声明props
            // 将title属性渲染到template中，然后替换父组件cs1
            props:['title'],
            template:'<h2>{{title}}</h2>'
        }
        )

        new Vue({
            el: '#app',
        }
        )
    </script>

动态props

    <div id="app">
        <!-- 在cs1父组件中，便利posts中的每个字典，然后用v-bind动态绑定 -->
        <cs1
            v-for='post in posts'
            v-bind:title='post.title'
        ></cs1>
    </div>
      
    <script>

    Vue.component('cs1',{
            props:['title'],
            template:'<h2>{{title}}</h2>'
        }
        )

        new Vue({
            el: '#app',
            data:{
                posts:[
                    // 在实际应用中，以下内容可能是从api获取的一个嵌套字典的列表
                    {id:1,title:'jdango入门'},
                    {id:2,title:'vue获取api'},
                    {id:3,title:'python socket原理'},
                ]
            }
        }
        )
    </script>

局部组件

    <div id="app">
        <cs1
            v-for='post in posts'
            v-bind:key='post.id'
            v-bind:title='post.title'
        ></cs1>
    </div>
      
    <script>

    //创建一个局部组件，在vue中调用，只有这个vue实例可使用
    var PostItem = {
            props:['title'],
            template:'<h2>{{title}}</h2>'
    }

        new Vue({
            el: '#app',
            data:{
            posts:[
                {id:1,title:'jdango入门'},
                {id:2,title:'vue获取api'},
                {id:3,title:'python socket原理'},
            ]},
            components:{'cs1':PostItem}
        }
        )
    </script>

组件通信

props参数使父组件向子组件传递数据，如果要让子组件向父组件传递数据，就要用到emit

<body>
    <div id="app">
        <div>
            <ul>
                <!-- 第二步：子组件触发的@remove，然后触发根组件的removeItem方法 -->
                <cs1 v-for='post in posts' :key='post.id' :title='post.title' @remove='removeItem'></cs1>
            </ul>
        </div>
    </div>
 
    <script>

        // 创建一个局部组件，每个模板中有一个父组件传递过来的title，和一个触发remove方法的按钮
        // 第一步：在remove方法中，会使用emit方法向父组件触发remove方法，并带上本实例的title参数
        var PostItem = {
            props:['title'],
            template:`
                <li>
                    <h2>现在开始学习：{{title}}</h2>
                    <button @click='remove'>remove</button>
                </li>
                `,
            methods:{
                remove(){
                    this.$emit('remove',this.title)
                }
            }
        }

        new Vue({
            el: '#app',
            data:{
                posts:[
                {id:1,title:'jdango入门'},
                {id:2,title:'vue获取api'},
                {id:3,title:'python socket原理'},
                ],
            },
            components:{'cs1':PostItem},
            methods:{
                removeItem(titleText){
                    // 第三步：titleText是传递过来的参数，过滤掉this.posts中这个参数，然后实时同步到html中
                    this.posts = this.posts.filter(function(post) {
                        return post.title !== titleText
                    })
                }
            }
        })
    </script>
</body>

转载于:https://www.cnblogs.com/jabbok/p/10644423.html

weixin_34228617

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue教程2-组件化开发

全局组件 <div id="app"> <cs1></cs1> </div> <script> Vue.component('cs1',{ data(){return {count:0}}, templat...
复制链接

扫一扫