组件
- 将公用的功能抽离出来，形成组件；目的：复用代码。
1.1 全局组件
<div id="app">
<!--引用组件，可多次引用-->
<demo></demo>
</div>
<script src="../js/vue.js"></script>
<script>
// 全局组件,第一个参数：自定义名称,第二个：{ }
Vue.component('demo',{
// 接收的是字符串
// 已完成组件的注册
template:'<h1>test</h1>'
})
new Vue({
el:'#app'
})
</script>
</body>
我们可以看到，现在前端在div中所显示的是【<h1>test</h1>】，而我们在源码中是【<demo></demo>】，所以<demo></demo>就是我们所创建的全局组件demo，当我们引用时，就会显示【template】定义的值
1.2全局组件中的data使用
<body>
<div id="app">
<!--引用组件-->
<demo></demo>
</div>
<script src="../js/vue.js"></script>
<script>
// 全局组件,第一个参数：自定义名称,第二个：{ }
Vue.component('demo',{
// 接收的是字符串
// 已完成组件的注册
template:'<h1>msg</h1>',
// 组件中的data，必须是个方法，如是dict,当有改动时，其他页面有同时在使用的同时也会改变，使用了方法后，因作用域限制，只会作用于vue,其他数据不会变化
data:function () {
return{
msg:'msg'
}
}
})
new Vue({
el:'#app'
})
</script>
</body>
效果展示：
1.3全局组件中methods的绑定使用
<body>
<div id="app">
<!--引用组件-->
<demo></demo>
<demo></demo>
</div>
<script src="../js/vue.js"></script>
<script>
// 全局组件,第一个参数：自定义名称,第二个：{ }
Vue.component('demo',{
// 接收的是字符串
// 已完成组件的注册
template:'<h1 @click="change">{{msg}}</h1>',
// 组件中的data，必须是个方法
data:function () {
return{
msg:'msg'
}
},
methods:{
change:function () {
this.msg = 'test'
}
}
})
new Vue({
el:'#app',
})
</script>
</body>
前端页面默认显示：
点击:第一个【msg】后显示：
1.4 全局组件定义后被引用
<body>
<div id="app">
<test></test>
</div>
<script src="../js/vue.js"></script>
<script>
Vue.component('test',{
template:'<div><span>全局组件：{{number}}</sapn>\</div>',
data:function () {
return{
number: 0
}
}
})
new Vue({
el:'#app',
data:{
},
methods:{
}
})
</script>
</body>
展示：
2、$refs
- 主要应用于有组件时
this.$refs：获取resf的属性，属性就是当前页面：所有定义了ref属性的这一个标签，等同于document.getElementById()
<body>
<div id="app">
<div ref="test"></div>
<input type="button" value="test" @click="change">
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
},
methods:{
change:function () {
// 获取resf的属性，属性就是当前页面：所有定义了ref属性的这一个标签
console.log(this.$refs)
}
}
})
</script>
</body>
前端展示：
2.1 this.$refs.xxx
<body>
<div id="app">
<div id="i1" ref="test">ref=test</div>
<input type="button" value="test" @click="change">
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
},
methods:{
change:function () {
// 获取resf的属性，属性就是当前页面：所有定义了ref属性的这一个标签
// this.$refs.test相当于是document.getElementById('i1')
console.log('this.$refs.test--->',this.$refs.test)
console.log("document.getElementById('i1')--->",document.getElementById('i1'))
}
}
})
</script>
</body>
2.2 refs属性使用后所携带的方法
<body>
<div id="app">
<test ref="a"></test>
<input type="button" value="test" @click="change">
</div>
<script src="../js/vue.js"></script>
<script>
Vue.component('test',{
template:'<div><span @click="add">子组件：{{number}}</sapn>\</div>',
data:function () {
return{
number: 0
}
},
methods: {
add:function () {
// number++: 表示每次+1
this.number++
}
}
})
new Vue({
el:'#app',
data:{
count:0
},
methods:{
change:function () {
console.log('this.$refs--->',this.$refs)
}
}
})
</script>
</body>
可以拿到number，这么一来，我们就可以获取到number：
new Vue({
el:'#app',
data:{
count:0
},
methods:{
change:function () {
console.log('this.$refs.a.number--->',this.$refs.a.number)
}
}
})
通过绑定ref属性，如果是组件，就可以获取到全局组件中data的任意一个值
2.3 通过获取 ref 中number 实现运算
<body>
<div id="app">
<test ref="a"></test>
<test ref="b"></test>
<div>父组件：<span>{{count}}</span></div>
<input type="button" value="test" @click="change">
</div>
<script src="../js/vue.js"></script>
<script>
Vue.component('test',{
//绑定add后，每次点击会+1
template:'<div><span @click="add">子组件：{{number}}</sapn>\</div>',
data:function () {
return{
number: 0
}
},
methods: {
add:function () {
// number++: 表示每次+1
this.number++
}
}
})
new Vue({
el:'#app',
data:{
count:0
},
methods:{
change:function () {
// this.$refs.a.number:获取到a的number值
this.count = this.$refs.a.number +this.$refs.b.number
}
}
})
</script>
</body>
标签：function,Vue,refs,基础,number,组件,data From： https://www.cnblogs.com/brf-test/p/16990703.html