[JavaScript知识库]Vue基础（三）——组件

一、组件
1、全局组件——所有实例都能用全局组件。

<div id="app">
	<test></test>
</div>

<script>
// 注册
Vue.component('test', {
  template: '<h1>这是全局组件</h1>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

2、局部组件——实例选项中注册的组件，只能在该实例中使用

<div id="app">
	<test></test>
</div>

<script>
var Child = {
  template: '<h1>这是部分组件</h1>'
}

// 创建根实例
new Vue({
  el: '#app',
  components: {
    // <test> 只能在父模板可用
    'test': Child
  }
})
</script>

component是注册全局组件，在实例化VUE前调用，注册后可以全局使用

components是局部注册组件，注册后只能在当页调用。
二、Prop——父传子
prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”

<div id="app">
	<div>
	  <input v-model="parentMsg">
	  <br>
	  <child v-bind:message="parentMsg"></child>
	</div>
</div>

<script>
// 注册
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中像 “this.message” 这样使用
  template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
  el: '#app',
  data: {
	parentMsg: '父组件内容'
  }
})
</script>

三、Prop——子传父
使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件
父组件可以用 v-on 来监听子组件触发的事件。

<div id="app">
    <div id="counter-event-example">
      <p>{{ total }}</p>
      <button-counter v-on:increment="incrementTotal"></button-counter>
      <button-counter v-on:increment="incrementTotal"></button-counter>
    </div>
</div>
 
<script>
Vue.component('button-counter', {
  template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementHandler: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})
</script>

三、Ref——给元素或子组件注册引用信息
1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素

<div id="ref-outside-dom" v-on:click="consoleRef" >
   <component-father>
   </component-father>
   <p ref="outsideDomRef">ref在外面的元素上</p>
</div>   
<script>
var refoutsidedomTem={
	template:"<div class='childComp'><h5>我是子组件</h5></div>"
};
var refoutsidedom=new Vue({
	el:"#ref-outside-dom",
	components:{
		"component-father":refoutsidedomTem
	},
	methods:{
		consoleRef:function () {
             console.log(this); // #ref-outside-dom    vue实例
             console.log(this.$refs.outsideDomRef);  //  <p>标签dom元素 ref在外面的元素上</p>
        }
    }
});
</script>

2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。

<div id="ref-outside-component" v-on:click="consoleRef">
    <component-father ref="outsideComponentRef">
    </component-father>
    <p>ref在外面的组件上</p>
</div>
<script>
var refoutsidecomponentTem={
        template:"<div class='childComp'><h5>我是子组件</h5></div>"
    };
    var refoutsidecomponent=new Vue({
        el:"#ref-outside-component",
        components:{
            "component-father":refoutsidecomponentTem
        },
        methods:{
            consoleRef:function () {
                console.log(this); // #ref-outside-component     vue实例
                console.log(this.$refs.outsideComponentRef);  // div.childComp vue实例，组件实例
            }
        }
    });
</script>