vue基本语法学习-3

2020/7/9 5:12:55 人评论 次浏览 分类:学习教程

先插入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: '<h4>自定义的全局组件!</h4>'
})

在TestMyComponents.vue中使用

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

在这里插入图片描述
运行截图如下:
在这里插入图片描述

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

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

在export default注册上

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

使用:

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

在这里插入图片描述
运行截图:
在这里插入图片描述

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

// 定义一个带Prop的局部组件
var ChildProp = {
  template: '<h4>{{prop_message}}</h4>',// 使用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 prop_message'></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: '<button v-on:click="incrementHandler">{{count}}</button>',
    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>

在这里插入图片描述
在这里插入图片描述

运行截图:
在这里插入图片描述

相关资讯

    暂无相关的资讯...

共有访客发表了评论 网友评论

验证码: 看不清楚?
    -->