Vue学习笔记之组件模板

1.is的使用

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

2.定义data

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

3.使用ref属性操作Dom

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

	
	
	
{{total}}

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

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

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

5.父子组件事件监听

 

//-------------------------子组件
Vue.component('child',{
	template:'
child
', //子组件监听的才是原生的click事件
		methods:{
		    handleChildClick:function (){
		        alert('click')
		        this.$emit('click')
			}
		}
	})

 //-------------------如果想让父组件监听原生事件，可以加上.native

6.非父子组件传值

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

2.vuex

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

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

    
        
dell