Vue组件

最新推荐文章于 2019-06-20 10:12:20 发布

xingxingxingge

最新推荐文章于 2019-06-20 10:12:20 发布

阅读量183

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/xingxingxingge/article/details/80354375

版权

Vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

定义全局组件

Vue.component('组件名',{
  props:[],    //接收父组件的传参
  template: '组件模版'  // 这里可以字符串拼接html代码, 也可在Vue挂载点外面定义 <template id="tmp"></template>, 传入 "#tmp" 即可
})

定义局部组件

var myapp = new Vue({
  el:'#app',
  data:{  },
  methods:{ },
  //定义局部组件
  components:{
    "list-item":{ //组件名
      props:["content"], //接收父组件的传参
      template: "<li>{{content}}</li>",
    }
  }
});

父子组件传值

父传子 props 通过属性绑定的形式, 将 home 传递给子组件 :title="'home'" 子组件通过 props: ['title'] 取到参数

子传父 $emit @parentfun="alertContent" 通过@将父组件的方法传递给子组件, 子组件接收 this.$emit('parentfun', 子组件给父组件的参数 )

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<title>Vuetest</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- 传递 title 给 apphead 组件, 'home'表示是字符串,不然的话会当做变量在 data 里面找 -->
    <apphead :title="'home'"></apphead>
    <ul>
      <list-item v-for='(item, index) in lists' :key='index' 
        :content="item" @parentfun="alertContent"></list-item>
      <!-- @parentfun="alertContent" 监听子组件的 parentfun 事件
        也可理解为将 alertContent 方法传给子组件 -->
    </ul>
  </div>
 
  <!-- 使用 template 定义组件模版是必须放在 vue 控制区域的外部 -->
  <template id="head">
    <div>{{title}}</div>
  </template>
 
  <script>
    // 定义全局组件
    Vue.component("apphead",{
      props: ['title'], // 父组件的传参
      template: '#head', // 组件模版
    })
    var myapp = new Vue({
      el:'#app',
      data:{
        lists: ["tom", "jon", "luck"]
      },
      methods:{
        alertContent(content) {
          alert(content);
        }
      },
      //定义局部组件
      components:{
        "list-item":{
          props:["content"],
          template: "<li @click='handcilck'>{{content}}</li>",
          methods: {
            handcilck(){
              // 调用父组件方法,并传入参数 --- 子组件向父组件传值
              this.$emit('parentfun', this.content)
            }
          }
        }
      }
    });
 
  </script>
</body>
</html>

父子组件通信之 ref / $parent / $children

ref 是被用来给元素或子组件注册引用信息的, 引用信息将会注册在父组件的 $refs 对象上

如果ref用在子组件上, 指向的是组件实例, 可以理解为对子组件的索引, 通过 $ref 可获取到子组件里的属性和方法
如果ref在普通的 DOM 元素上使用, 引用指向的就是 DOM 元素, 通过 $ref 可获取到该 DOM 的属性集合

$parent 在子组件内部可以通过 this.$parent 获得父组件的实例

$children 返回的是一个字组件集合, 如果你清楚的知道子组件的顺序,可以使用下标来操作

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<title>Vuetest</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- ref 1.调用子组件时 给子组件加上 ref 属性 -->
    <chile ref="msg"></chile>
    <input type="button" value="调用子组件的方法" @click="getChild" >
  </div>
 
  <template id="head">
    <div @click="getparent">我是子组件</div>
  </template>
  <script>
    // 定义子组件
    Vue.component("chile",{
      props: ['title'],
      template: '#head',
      methods: {
        showmsg(){
          alert("我是子组件的方法")
        },
        getparent(){
          // 子组件通过调用 this.$parent 可以获得父组件的实例
          console.log(this.$parent)
          this.$parent.showmsg()
        }
      }
    })
 
    var myapp = new Vue({
      el:'#app',
      data:{ },
      methods:{
        getChild() {
          // ref 2. 通过 this.$refs.msg 可以获取子组件的实例
          this.$refs.msg.showmsg()
          // 也可直接通过 this.$children 获得子组件集合
          // this.$children[0].showmsg()
        },
        showmsg(){
          alert("我是父组件的方法")
        },
      }
    });
  </script>
</body>
</html>

xingxingxingge

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件

定义全局组件Vue.component('组件名',{ props:[], //接收父组件的传参 template: '组件模版' // 这里可以字符串拼接html代码, 也可在Vue挂载点外面定义<template id="tmp"></template>, 传入 "#tmp" 即可})定义局部组件var myapp = new Vue...
复制链接

扫一扫

专栏目录