vue基本语法学习-3

先插入2个页面配置的小功能使用
1、设置页面的title
a.在router—index.js中配置路由，加上meta标签，例如：

{
    path: '/test_components',
    component: TestMyComponents,
    meta:{
      title:"测试自定义组件，指令页面"
    }
}

b.在main.js中配置

/*路由发生变化修改页面title */
router.beforeEach((to, from, next) => {
  if (to.meta.title) {
	document.title = to.meta.title
  }
  next()
})

测试截图：

2、设置页面的icon
a.在static目录放置favicon.ico图标（1K左右）
b.在index.html中加上link标签，例如：

<link rel="shortcut icon" href="static/favicon.ico">

测试截图：

下面继续讲解vue的语法
1、全局组件注册
注册一个全局组件语法格式如下：
Vue.component(tagName, options)
例如：在main.js中配置

// 注册全局组件
Vue.component('my-global-components', {
  template: '
自定义的全局组件!
'
})

在TestMyComponents.vue中使用

<!-- 这个是在全局注册一个组件 -->
<my-global-components></my-global-components>

运行截图如下：

2、局部组件
在script中定义一个局部组件

  // 定义一个局部组件
  var Child = {
    template: '
这是个局部组件
'
  }

在export default注册上

components:{// 注册一个局部组件
	'mychild':Child,
},

使用：

<!-- 使用局部组件 -->
<mychild></mychild>

运行截图：

3、props
功能：将父组件的内容传递给子组件。（我们子组件里面就不用写死值）
代码片段（多个一起放一起）：

// 定义一个带Prop的局部组件
var ChildProp = {
  template: '
{{prop_message}}
',// 使用prop_message属性的值
  props: ["prop_message"] // 将父组件的值通过props传递给子组件
}
  
...

components:{// 注册一个局部组件
  'mychild':Child,

  //prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。
  'mychild-prop':ChildProp,

  'mychild-define':ChildDefine
},

...

//使用
<!-- 使用带prop的局部组件 ， 可以通过prop_message传值 -->
<mychild-prop prop_message = '父组件的值通过props属性传递成功 ></mychild-prop>

运行截图：

4、动态props
上面子组件里面的值是写死的。动态props就是子组件的值需要根据父组件里面的值来变化。其实就是加个【v-bind】就行了。
基于上面代码修改
定义一个父组件字符串，以便使用

使用：

    <!-- 动态 Prop ， 只需要加上v-bind，属性的内容就是parent_message （对应这data里面的属性值）
    parent_message值改变了，子标签的值也会改变
    prop_message --- ChildProp中的props里面的 prop_message
    prop_message --- 对应data里面的parent_message
    -->
    <!-- 注意: prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。 -->
    <mychild-prop v-bind:prop_message = 'parent_message'></mychild-prop>

运行截图：

注意: prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。

5、自定义事件
我们希望子组件值的变化同步更新父组件。就可以通过自定义事件来做。

• 使用 $on(eventName) 监听事件
• 使用 $emit(eventName) 触发事件
  完整的代码：

<template>
  <div class = "mycomponents" >

    <!--
      自定义事件
      父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！
      我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：
      使用 $on(eventName) 监听事件
      使用 $emit(eventName) 触发事件
    -->
    <!-- v-on:increment 监听increment事件，触发了这个事件的时候就会执行incrementTotal这个方法 -->
    <mychild-define v-on:increment = "incrementTotal"></mychild-define>
    <mychild-define v-on:increment = "incrementTotal"></mychild-define>
    <p>count_total的值为 {{count_total}}</p>

  </div>
</template>


<script>
  // 定义个可以将值返回给父组件的局部组件,通过自定义事件
  var ChildDefine = {
    template: '{{count}}',
    data(){
      return {//这个一定要是函数，否则会影响到其它实例（比如多个按钮，一个button值变化，另一个也变化）
        count : 0
      }
    },
    methods:{
      incrementHandler: function () {
        this.count += 1 ; // 需要使用this.count ，因为是在方法里面
        this.$emit('increment')// 触发increment这个事件，在v-on:increment的地方都会监听到
      }
    }
  }

  export default {
    name: 'MyComponents',
    data () {
      return {
        count_total:0,
      }
    },
    methods:{
      incrementTotal(){
        this.count_total += 1;
      }
    },
    components:{// 注册一个局部组件
      'mychild-define':ChildDefine
    }
  }
</script>

运行截图：