vue使用组件

最新推荐文章于 2024-10-06 22:31:10 发布
最新推荐文章于 2024-10-06 22:31:10 发布
阅读量156 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/rickyctbur/p/11515705.html
版权
使用组件的细节：

细节一：子组件的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中组件使用的细节1</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="root">
    <table>
        <tbody>
            <tr is="row"></tr>
            <tr is="row"></tr>
            <tr is="row"></tr>
        </tbody>
    </table>
</div>
<script>
    Vue.component('row',{
        template: `<tr><td>this is row</td></tr>`
    })
    var vm = new Vue({
        el : '#root',
    })
</script>
</body>
</html>

 细节二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中组件使用的细节1</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="root">
    <table>
        <tbody>
            <tr is="row"></tr>
            <tr is="row"></tr>
            <tr is="row"></tr>
        </tbody>
    </table>
</div>
<script>
    Vue.component('row',{
        //子组件中的数据 data 需要用函数来表示 函数返回一个对象
        data: function (){
            return {
                name : '小明'
            }
        },
        template: `<tr><td>{{name}}</td></tr>`
    })
    var vm = new Vue({
        el : '#root',
    })
</script>
</body>
</html>

 ref 的用法：vue中使用 ref 获取 dom 节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中组件使用的细节1</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="root">
    <div
        ref="hello"
        @click="fun"
    >hello world</div>
</div>
<script>
    var vm = new Vue({
        el : '#root',
        methods : {
            fun : function(){
                alert(this.$refs.hello.innerHTML)
            }
        }
    })
</script>
</body>
</html>
弹出了 指定div 的内容 hello world

 ref 综合案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中组件使用的细节1</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="root">
    <counter ref="one" @change="handleChange"></counter>
    <counter ref="two" @change="handleChange"></counter>
    <div>{{total}}</div>
</div>
<script>
    Vue.component('counter',{
        template: `<div @click="handleClick">{{number}}</div>`,
        data: function () {
            return{
                number : 0
            }
        },
        methods: {
            handleClick : function(){
                this.number++;
                this.$emit('change')
            }
        }
    })
    var vm = new Vue({
        el : '#root',
        data : {
            total : 0
        },
        methods : {
            handleChange : function(){
                this.total = this.$refs.one.number + this.$refs.two.number
            }
        }
    })
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中组件使用的细节1</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="root">
    <counter ref="one" @change="handleChange"></counter>
    <counter ref="two" @change="handleChange"></counter>
    <div>{{total}}</div>
</div>
<script>
    let count ={
        template: `<div @click="handleClick">{{number}}</div>`,
        data: function () {
            return{
                number : 0
            }
        },
        methods: {
            handleClick : function(){
                this.number++;
                this.$emit('change')
            }
        }
    }
    var vm = new Vue({
        el : '#root',
        data : {
            total : 0
        },
        components:{
          counter : count // 子组件
        },
        methods : {
            handleChange : function(){
                this.total = this.$refs.one.number + this.$refs.two.number
            }
        }
    })
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件传值</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="root">
    <counter :count="1" @change="handleChange"></counter>
    <counter :count="2" @change="handleChange"></counter>
    <div>{{total}}</div>
</div>
<script>
    //父组件向子组件传值 子组件不能直接修改父组件传递的值
    // 可以定义一个属性存放父组件传递的值 然后进行修改自己定义的属性
    let counter = {
        props : ['count'],
        template : `<div @click="hendleClick">{{number}}</div>`,
        data : function(){
            return {
                number : this.count
            }
        },
        methods : {
            hendleClick : function(){
                this.number = this.number + 2;
                this.$emit('change',2);//向外触发一个自定义事件 第二个参数改变的步长
            }
        }
    }
    let vm = new Vue({
        el:'#root',
        data:{
          total: 3
        },
        components:{
            counter : counter, //子组件
        },
        methods : {
            handleChange : function(step){ //参数为监听事件传出的步长
                this.total += step
            }
        }
    })
</script>
</body>
</html>
以上三个案例的结果一样： 点击前两个数字会自加1 触发第三个数字改变  第三个数字等于前两个数字的和 （不同的是子组件的写法不同）
ref 练习：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件传值</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="root">
    <one ref="one" :count="1" @first="Change"></one>
    <two ref="two" :count="2" @second="Change"></two>
    <div>{{total}}</div>
</div>
<script>
    let one = {
        props : ['count'],
        template : `<div @click="hendleClick">{{number}}</div>`,
        data : function(){
            return {
                number : this.count
            }
        },
        methods : {
            hendleClick : function(){
                this.number = this.number + 2;
                this.$emit('first',2);
            }
        }
    }
    let two = {
        props : ['count'],
        template : `<div @click="hendleClick">{{number}}</div>`,
        data : function(){
            return {
                number : this.count
            }
        },
        methods : {
            hendleClick : function(){
                this.number = this.number + 3;
                this.$emit('second',3);
            }
        }
    }
    let vm = new Vue({
        el:'#root',
        data:{
            total: 3
        },
        components:{
            one : one,
            two : two
        },
        methods : {
            Change : function(){
                this.total = this.$refs.one.number + this.$refs.two.number
            }
        }
    })
</script>
</body>
</html>
 组件参数校验：

需求：校验父组件传递过来的必须是个字符串

<div id='root'>
　　<child content='hello world'></child>
</div>

<script>
Vue.component('child',{
　　props:{
　　　　content:String
　　},
　　template:'<div>{{content}}</div>'
})
var vm = new Vue({
　　el:'#root'
})
</script>

 将接收的props定义成对象，并指定类型，不以数组的形式接收参数

 接收的数据是字符串类型 或者 数字类型都可以 
props:{
　　content:[String, Number]
}

 复杂的校验：

<div id='root'>
　　<child content='hello world'></child>
</div>

<script>
Vue.component('child',{
　　props:{
　　　　content:{
　　　　　　type:String,//数据类型
　　　　　　required:false,//是否是必传
　　　　　　default:'default content',//如果没传值，默认值
　　　　　　validator:function(val){//自定义校验器,数据长度必须 > 5 参数为传入的数据
　　　　　　　　return (val.length>5)
　　　　　　}
　　　　}
　　},
　　template:'<div>{{content}}</div>'
})
var vm = new Vue({
　　el:'#root'
})
</script>

非props特性

父组件向子组件传递参数，子组件没有props这块内容，所以就会报错，不去接收，就没法使用这个content
第二个特点是，子组件没接收，对应的属性值会显示在标签中，props特性不会显示
Vue给组件绑定原生事件：组件生成的元素绑定原生事件需要在事件的后面加上native
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue给组件绑定原生事件</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="root">
    <child @click.native="handleClick"></child>组件生成的元素绑定原生事件需要在事件的后面加上native
</div>
<script>
    Vue.component('child',{
        template : `<div>Child</div> `
    })
    let vm = new Vue({
        el : '#root',
        methods : {
            handleClick : function(){
                alert('click')
            }
        }
    })
</script>
</body>
</html>
非父子组件间的传值(如何在vue重使用 bus/总线/发布订阅模式/观察者模式)：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非父子组件之间的传值(bus/总线/发布订阅模式/观察者模式)</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <child content="Dell"></child>
        <child content="Lee"></child>
    </div>
    <script>
        //在vue的原型链上挂载一个bus的属性 只要之后调用new Vue()或者创建组件 每一个组件都会有bus这个属性
        Vue.prototype.bus = new Vue();
        Vue.component('child',{
            props : {
                content : String
            },
            data : function(){
                return {
                    selfContent : this.content
                }
            },
            template : `<div @click="hendleClick">{{selfContent}}</div>`,
            methods : {
                hendleClick : function(){
                    this.bus.$emit('change',this.selfContent)
                }
            },
            //借助生命周期钩子监听bus的改变
            mounted : function(){
                this.bus.$on('change',(msg) => {
                    this.selfContent = msg;
                })
            }
        })
        let vm = new Vue({
            el : '#root',
        })
    </script>
</body>
</html>
vue中的插槽：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中的插槽</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="root">
    <child>
        <!--需要插槽才能渲染的内容-->
        <p>Dell</p>
        <p>Lee</p>
    </child>
</div>
<script>
    //slot语法：slot标签显示的内容是父组件向子组件插入的内容 插槽 也就是上面的 child 标签包住的 p 标签
    //slot中可以放置默认内容 当父组件没有传入内容则显示默认内容
    Vue.component('child',{
        template : `<div>
                        <p>hello</p>
                        <slot><p>默认内容，当子组件没有传如任何内容时默认显示</p></slot>
                    </div>`,
    })
    let vm = new Vue({
        el : '#root',
    })
</script>
</body>
</html>
假如使用多个插槽的时候，就需要用具名插槽： 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中的插槽</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="root">
    <child>
        <div slot="footer">footer</div>
    </child>
</div>
<script>
    Vue.component('child',{
        template : `<div>
                        <slot name="header">
                            <h1>default header</h1>
                        </slot>
                        <div>content</div>
                        <slot name="footer"></slot>
                    </div>`,
    })
    let vm = new Vue({
        el : '#root',
    })
</script>
</body>
</html>

   作用域插槽：作用域插槽必须是由template标签包起来的 并且插槽要声明从子组件接收的数据放在哪（slot-scope） 以及告诉子组件模板的信息（接收到的数据应该怎么展示）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作用域插槽</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="root">
    <child>
        <template slot-scope="props"><!--定义一个插槽，该插槽必须放在template标签内-->
            <em>{{props.item}}</em><!--定义使用渲染方式-->
        </template>
    </child>
    <child>
        <template slot-scope="props">
            <h1>{{props.item}}</h1><!--定义不同的渲染方式-->
        </template>
    </child>
</div>
<script>
    let count = {
        data : function(){
            return {
                list : [1, 2, 3, 4]
            }
        },
        template : `<div>
                         <slot v-for="item of list" :item=item></slot>
                    </div>`
    }
    let vm = new Vue({
        el : '#root',
        components : {
            child : count
        }
    })
</script>
</body>
</html>

动态组件案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中的动态组件</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="root">
    <component :is="type"></component>
    <button @click="handlechange">change</button>
</div>
<script>
    //v-once指令 对数据进行缓存 提高性能
    let childone = {
        template : `<div v-once>child-one</div>`
    }
    let childtwo = {
        template : `<div v-once>child-two</div>`
    }
    let vm = new Vue({
        el : '#root',
        data : {
            type: childone
        },
        methods : {
            handlechange : function(){
                this.type === childone ? this.type=childtwo : this.type=childone
            }
        }
    })
</script>
</body>
</html>

转载于:https://www.cnblogs.com/rickyctbur/p/11515705.html

weixin_30535043
关注
vue中组件的props属性（详）
蜗牛~~
10-28 17万+
今天这篇文章，让你彻底学会props属性…… props主要用于组件的传值，他的工作就是为了接收外面传过来的数据，与data、el、ref是一个级别的配置项。
Vue组件的使用
奇奇怪怪
12-29 3301
组件是可复用的 Vue 实例, 把一些公共的模块抽取出来，然后写成单独的的工具组件或者页面，在需要的页面中就直接引入即可那么我们可以将其抽出为一个组件进行复用。例如 页面头部、侧边、内容区，尾部，上传图片，等多个页面要用到一样的就可以做成组件，提高了代码的复用率。
vue 使用组件
开发猫
05-29 315
注意： 有时候使用npm i node-sass -D装不上，这时候，就必须使用 cnpm i node-sass -D 在普通页面中使用render函数渲染组件 在webpack中配置.vue组件页面的解析 运行cnpm i vue -S将vue安装为运行依赖； 运行cnpm i vue-loader vue-template-compiler -D...
Vue 自定义组件的使用指南
最新发布
m0_57836225的博客
10-06 1163
首先，让我们了解如何创建一个自定义组件。在 Vue 中，一个自定义组件通常由三部分组成：模板（template）、脚本（script）和样式（style）。创建好自定义组件后，可以在其他组件中局部使用它。局部使用意味着只有在特定的组件中才能访问和使用这个自定义组件。如果希望在整个项目中的任何地方都能使用某个自定义组件，可以进行全局注册。自定义组件可以接收来自父组件的数据。可以通过 props 属性来实现。在自定义组件的脚本部分，定义接收的数据的 props。
Vue中使用组件
qq_44621394的博客
08-31 2235
使用函数能保证每个组件的data的内存是独立的而不是共用。因为组件是可以复用的,多个组件共用数据会相互影响。子组件通过props获取父组件传递的属性值,子组件通过$emit执行父组件的回调函数与父组件进行通信。组件也是一个vue实例,也具有methods,computed,data,计算属性等。Vue.component注册的是全局组件,在所有vue实例/组件中都能使用。需要注意的是回调函数的名字不能是驼峰。vue提供了slot插槽用来占位。............
vue组件的使用
weixin_55267057的博客
07-13 224
vue组件的使用
vue简洁滑块：vue简洁滑块，一个简单的vue滑动组件
02-06
vue-concise-slider，一个简单的滑动组件，配置简单，支持自适应/全屏+按钮+分页，同时兼容移动端和PC端 版本 支持vue2.0 + beta版本 特色 简单配置 轻量（〜35kB压缩） 多种滑动样式 目前已实现 全屏自适应 ...
vue组件传参
m0_67316947的博客
07-27 5270
vue组件之间可以进行参数传递，组件传参可分为父向子传参、子向父传参、兄弟之间传参
vue-react：在Vue应用程序中将React组件用作Vue组件
02-04
vue-react是Vue.js的插件，它使您可以像使用Vue组件一样使用React组件。 安装 npm npm install vue-react --save 如果尚未安装，请安装react和react-dom软件包。 还安装babel插件。 npm install react react-dom ...
vue的组件使用
m0_59359854的博客
08-04 192
代码】vue的组件使用。
VUE组件的使用
qq_44695192的博客
07-23 140
1.先创建文件夹 components 在 components 文件中创建vue组件 2.在app.vue中引用你的组件 3. 在components 注册你的组件 4. 使用你的组件 注意 以上234步少一步都会报错，包括你注册后未使用也会报错 Vue组件组件传值：父传子、子传父、子传子 在Vue的框架开发的项目过程中，经常会用到组件来管理不同的功能，有一些公共的组件会被提取出来。这时必然会产生一些疑问和需求？比如一个组件调用另一个组件作为自己的子组件，那么我们如何进行给子组件进行传值呢？如果是电商
Vue-组件
m0_63563047的博客
09-17 1079
在 Vue中，组件可以被视为一个独立的 Vue 实例，具有其自己的数据、模板和方法，可以独立处理其内部逻辑，与其他组件和 Vue 实例进行交互。
Vue组件（Component）
热门推荐
leva的博客
02-08 1万+
在正式介绍组件前，先看一个Vue组件的简单示例感受一下，代码如下：组件是可复用的Vue实例，且带有一个名字，在这个示例中组件名字是button-counter。可以在一个通过new Vue创建的Vue根实例中，把这个组件作为自定义标签来使用，代码如下：Web的组件其实就是页面组成的一部分，好比是计算机中的每一个硬件（如硬盘、键盘、鼠标等），它具有独立的逻辑和功能或界面，同时又能根据规定的接口规则进行相互融合，从而变成一个完整的应用。
Vue组件
Guo_guo
10-10 3305
趁team leader的安排，在团队内部进行一次技术分享的机会。整理下这半年用到的比较多的Vue内容，至今Vue的源码还未细心研读过，从开发使用层面上开两个专题：Vue组件和Vue Router。 1.工程搭建 打开pycharm后，file–&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;new–&amp;amp;amp;amp;amp;amp;amp;amp;am
Vue：组件怎么用？
大叔的博客
04-12 4088
非单文件组件和单文件组件的代码都在这了，还不喝一壶？
VUE组件的基本使用
guoguo0717的博客
05-25 1866
什么是组件化？ ◼ 我们将一个完整的页面分成很多个组件。 ◼ 每个组件都用于实现页面的一个功能块。 ◼ 而每一个组件又可以进行细分。 ◼ 人面对复杂问题的处理方式： ◼ 任何一个人处理信息的逻辑能力都是有限的 ◼ 所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。 ◼ 但是，我们人有一种天生的能力，就是将问题进行拆解。 ◼ 如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解。 ◼ 组件化也是类似的思想： ◼ 如果我们将一个页面中所有的处理
Vue组件使用技巧：细节点解析
在Vue组件中，当需要将`<tr>`元素作为子组件使用时，可能会遇到浏览器解析问题。由于HTML规范要求`<tbody>`内只能包含`<tr>`元素，直接在组件中定义`<row>`会导致DOM结构错误，`<tr>`元素会被放置到`<tbody>`的同级...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值