Vue学习笔记之组件模板

最新推荐文章于 2024-11-01 13:37:40 发布

愚蠢的土拨鼠要变聪明

最新推荐文章于 2024-11-01 13:37:40 发布

阅读量203

点赞数 1

分类专栏： Vue 文章标签：前端 vue模板组件

本文链接：https://blog.csdn.net/ddbwjkq/article/details/82789754

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.is的使用

在html5标准中<tbody>标签里只能写<tr>,但又希望row组件的内容显示在<tr>中，可以使用is属性

<body>
<div id="app" >
	<table>
		<tbody>
			<tr is="row"></tr>
			<tr is="row"></tr>
		</tbody>
	</table>
</div>

<script>
	Vue.component('row',{
	    template:'<tr><td>this is a row</td></tr>'
	});
	var vm=new Vue({
		el:'#app'
	});
</script>
</body>

2.定义data

在根组件里，定义data可以直接通过对象定义，但在非根组件里定义data，data必须是一个函数，而且要返回一个包含数据的对象，这是因为一个子组件不像根组件只会被调用一次，子组件在很多地方都会被调用，每一个子组件都应该有自己的数据空间，而不应该共享同一个数据。

<script>
	Vue.component('row',{
	    data:function(){//子组件定义data
	        return{
	            content:'this is content'
			}
		},
	    template:'<tr><td>{{content}}</td></tr>'
	});
	var vm=new Vue({
		el:'#app',
		data:{//根组件定义data
			message:'lla'
		}
	});
</script>

3.使用ref属性操作Dom

通过refs获取到的是这个组件的引用

<body>
<div id="app" >
	<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:'#app',
		data:{
		    total:0
		},
		methods:{
		    handleChange:function(){
		        this.total=this.$refs.one.number+this.$refs.two.number;
			}
		}
	});
</script>
</body>

4.父子组件传值（单向数据流）

父组件可以随意的向子组件传递参数，但是子组件不要去修改父组件传过来的值，因为如果传递的是引用类型的数据，该数据被其他子组件使用，那改变这个值就会影响其他子组件的使用。

可以通过在子组件中data设置一个副本，去更改这个副本的值。

<body>
<div id="app" >
<counter :count="1" ></counter>
<counter :count="3"></counter>
	<!--count加冒号，3就是数字了。因为这样后面跟的是表达式-->
</div>

<script>
	var counter={
	    props:['count'],
		data:function(){
	      return {
	          number:this.count
		  }
		},
	    template:'<div @click="handleClick">{{number}}</div>',
		methods:{
		    handleClick:function(){
		        this.number++;
			}
		}
	};
	var vm=new Vue({
		el:'#app',
		components:{
		    counter:counter
		}
	});
</script>
</body>

5.父子组件事件监听

<child @click="handleClick"></child> 
<!--这样父组件监听的事件并不是原生的click事件，而是子组件向外触发的自定义事件，需要子组件 this.$emit('click')-->
//-------------------------子组件
Vue.component('child',{
	template:'<div @click="handleChildClick">child</div>', //子组件监听的才是原生的click事件
		methods:{
		    handleChildClick:function (){
		        alert('click')
		        this.$emit('click')
			}
		}
	})

 //-------------------如果想让父组件监听原生事件，可以加上.native
<child @click.native="handleClick"></child>

6.非父子组件传值

1.运用发布订阅模式（总线机制/Bus/发布订阅模式/观察者模式）

2.vuex

<body>
<div id="app" >
	<child content="dell"></child>
    <child content="li"></child>
</div>

<script>
    Vue.prototype.bus=new Vue();
	Vue.component('child',{
	    props:{
	        content:String
        },
        data:function(){
	        return{
	            selfContent:this.content
            }
        },
		template:'<div @click="handleClick">{{selfContent}}</div>',
		methods:{
	        handleClick:function(){
	            this.bus.$emit('change',this.selfContent)
            }
		},
        mounted:function(){
	        var this_=this;
	        this.bus.$on('change',function(msg){
	            this_.selfContent=msg;
            })
        }
	})
	var vm=new Vue({
		el:'#app',
		methods:{
		}
	});
</script>

7.在Vue中使用插槽（slot）

更方便的向子组件传递dom元素，子组件使用这个插槽内容也很方便

<div id="app" >
    <child>
        <h1>dell</h1>
    </child>
</div>

<script>
    Vue.prototype.bus=new Vue();
	Vue.component('child',{
        template:'<div><p>hello</p><slot>默认内容</slot></div>'//如果父组件没有传递dom。插槽就显示默认内容
	})
	var vm=new Vue({
		el:'#app'
	});
</script>