Vue子组件与父组件详细解析

目录
  • 一、父组件和子组件
  • 二、模板分离写法
    • 1、template标签
    • 2、text/x-template
  • 三、父子组件通信-父传子
    • 1、Prop 类型
  • 四、父子组件通信子传父
    • 1、vm.$emit( eventName, […args] )
  • 五、父子组件通信-结合双向绑定案例
    • 1、基本模板代码
    • 2、增加双向绑定
    • 3、反向绑定
  • 六、组件访问父访问子

一、父组件和子组件

我们经常分不清什么是父组件,什么是子组件。现在来简单总结下:我们将某段代码封装成一个组件,而这个组件又在另一个组件中引入,而引入该封装的组件的文件叫做父组件,被引入的组件叫做子组件。

具体代码如下:

<div id="app">
  <component2></component2>
</div>
<script>
  // 全局注册
  Vue.component("component1", {
    template: `
    <div>
      <h2>hello</h2>
    </div>
    `
  })

  const app = new Vue({
    el: "#app",
    data: {
      message: "hello"
    },
    components: {
      // 局部注册
      "component2": {
        template: `
            <div>
              <component1></component1>
              <h2>world</h2>
            </div>
        `,
      }
    }
  })
</script>
  • 1.全局注册组件component1
  • 2.局部注册组件component2component2中又引用了组件component1

最后我们在html中使用组件component-2

模板代码就是:

<div>
  <component-1></component-1>
  <h2>world</h2>
</div>

又因为组件component1中也有模板,所以程序会自动进行解析,最后component-2html代码为

<div>
  <div>
      <h2>hello</h2>
    </div>
  <h2>world</h2>
</div>

所以我们在浏览器上看到的效果应该是:

hello
world

结果:

component1是子组件,component2是父组件

二、模板分离写法

上面我们创建组件的时候,都在组件中写了模板template,但是在编译器里这样写,不仅没有代码提示,而且换行也不对齐,写起来很麻烦,所以这里介绍模板分离写法

1、template标签

我们将原来在组件里写的template模板抽离出来,放在html中,使用template标签,并且给他附上id属性如下:

<template id="component2">
  <div>
    <component1></component1>
    <h2>world</h2>
  </div>
</template>

然后在组件中,将原来template标签的内容换成id,这样程序就会自动去寻找对应的id模板:

components: {
  // 局部注册
  "component2": {
    template: `#component2`,
  }
}

推荐这种写法

2、text/x-template

我们还有另一中写法,跟上面差不多,上面我们用的template标签,此写法只需将template中的内容放到script标签中,并给与类型type=text/x-template,再给上一个id属性即可,

如下:

<script type="text/x-template" id="component2">
  <div>
    <component1></component1>
    <h2>world</h2>
  </div>
</script>

三、父子组件通信-父传子

当我们创建了父组件和子组件,如果子组件也想获取父组件上相同的数据,一种方法是像后台发送接口获取数据,但是这样会给服务器造成压力,所以我们有了第二种方法,通过props属性来获取父组件的数据

<div id="app">
  <test1 :cmovies="movies"></test1>
</div>
<template id="test1">
  <div>
    <ul>
      <li v-for="item in cmovies">{{item}}</li>
    </ul>
  </div>
</template>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      movies: ["海贼王", "海尔兄弟", "海王"]
    },
    components: {
      "test1": {
        template: `#test1`,
        props: ['cmovies'],
        data(){
          return{}
        },
      }
    }
  })
</script>

这里我们将app实例定义为父组件,又定义了子组件test1,此时子组件test1想获取父组件data中的数据来展示在页面上,就需要写入props属性,这里绑定了变量cmovies,最后我们在html中使用子组件test1时,想传入父组件data中的数据,就需要绑定属性,:cmovies="movies",cmovies是props中定义的变量,绑定的值是movies列表,所以上面的代码<li v-for="item in cmovies">{{item}}</li>中的cmoviess的值其实是列表movies的数据,因为父组件已经向子组件传递了值

最后网页上就能显示movies中的电影了

以上页面上显示的无序列表,我们是使用了子组件,数据是从父组件data中传入到了子组件,子组件通过props与父组件绑定

1、Prop 类型

上面的例子我们把props定义成为了一个数组,用于接收来自父组件的数据。我们也可以使用对象作为替代,对象允许配置高级选项,如类型检测、自定义验证和设置默认值。

  • type:可以是下列原生构造函数中的一种:String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型,否则抛出警告。Prop 类型的更多信息在此。
  • default:any为该 prop 指定一个默认值。如果该 prop 没有被传入,则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。
  • required:Boolean定义该 prop 是否是必填项。在非生产环境中,如果这个值为 truthy 且该 prop 没有被传入的,则一个控制台警告将会被抛出。
  • validator:Function自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下,如果该函数返回一个 falsy 的值 (也就是验证失败),一个控制台警告将会被抛出。你可以在这里查阅更多 prop 验证的相关信息。

示例:

// 简单语法
Vue.component('props-demo-simple', {
  props: ['size', 'myMessage']
})

// 对象语法,提供验证
Vue.component('props-demo-advanced', {
  props: {
    // 检测类型
    height: Number,
    // 检测类型 + 其他验证
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: function (value) {
        return value >= 0
      }
    }
  }
})

注意:当我们在使用props时,如果我们使用驼峰命名法,比如cMovies,然后我们在HTML中绑定时如果也这么写,程序是不识别的,我们需要转成c-movies这种短横线形式

四、父子组件通信子传父

子传父的场景,通常是子组件传递事件给父组件监听,告诉父组件用户点击了哪个按钮,使用的函数是$emit

1、vm.$emit( eventName, […args] )

参数:

  • eventName:事件名字
  • args:不定长的数组

触发当前实例上的事件。附加参数都会传给监听器回调。

示例:

<div id="app">
  <test1 @item-click="cpnClick"></test1>
</div>
<template id="test1">
  <div>
    <button v-for="item in categories" @click="btnClick(item)">{{item.name}}</button>
  </div>
</template>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "hello"
    },
    methods: {
      cpnClick(item){
        console.log("success", item)
      }
    },
    components: {
      // 局部注册组件test1
      "test1": {
        data(){
          return{
            categories: [
              {id: "aaa", name: "热门推荐"},
              {id: "bbb", name: "手机数码"},
              {id: "ccc", name: "家用电器"},
              {id: "ddd", name: "食品饮料"},
            ]
          }
        },
        methods: {
          btnClick(item){
            this.$emit("item-click", item)
          }
        },
        template: `#test1`
      }
    }
  })
</script>

以上代码定义了test1子组件,并在methods中通过$emit传递了事件和额外的参数item,然后父组件通过@item-click="cpnClick"事件绑定,这样父组件就能收到子组件的点击事件,并且触发自己的点击事件,效果如下

我们可以看到控制台打印的日志中含有子组件的categories的分类

五、父子组件通信-结合双向绑定案例

下面这个案例结合了父传子和子传父,还有v-model,是个非常全面的案例

1、基本模板代码

<div id="app">
  <cpn :number1="num1" :number2="num2"></cpn>
</div>
<template id="cpn">
  <div>
    <h2>{{number1}}</h2>
    <h2>{{number2}}</h2>
  </div>
</template>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      num1: 0,
      num2: 1,
    },
    components: {
      // 定义子组件cpn
      "cpn": {
        template: `#cpn`,
        props: {
          number1: Number,
          number2: Number,
        }
      }
    },
  })
</script>

代码做了如下的事情

  • 1.定义了子组件cpn,又定义了2个属性number1number2用来接收父组件传递的数据
  • 2.在html代码中引用了子组件cpn,并将app实力中的num1和num2传递给子组件props中的属性
  • 3.最后我们在页面上显示的数据number1和number2其实就是data中的num1和num2

最后页面展示的效果就是:

0
1

2、增加双向绑定

在上面的模板基础上,我们新增双向绑定,新增2input标签,并使用v-modelprops中的属性进行绑定

<template id="cpn">
  <div>
    <h2>props:{{number1}}</h2>
    <input type="text" v-model="number1">
    <h2>props:{{number2}}</h2>
    <input type="text" v-model="number2">
  </div>
</template>

以上代码就完成了双向绑定,但是会有报错警告

当我们在子组件中与props双向绑定的时候,会出现警告,意思是不要使用props双向绑定,建议使用data或者compused来双向绑定,这里修改成与data绑定

<template id="cpn">
  <div>
    <h2>data:{{dnumber1}}</h2>
    <input type="text" v-model="dnumber1">
    <h2>data:{{dnumber2}}</h2>
    <input type="text" v-model="dnumber2">
  </div>
</template>
data(){
   return{
     dnumber1: this.number1,
     dnumber2: this.number2,
   }
},

当我们与data进行绑定以后,就不会出现报错了

3、反向绑定

接着上面的思路,我们希望input输入值的时候,改变data中的同时,也同时改变父组件中num1num2的值,这时就需要反向绑定通过子传父,

下面是完整的代码:

<div id="app">
  <cpn :number1="num1" :number2="num2" @num1change="num1change" @num2change="num2change"></cpn>
</div>
<template id="cpn">
  <div>
    <h2>props:{{number1}}</h2>
    <h2>data:{{dnumber1}}</h2>
    <label>
      <input type="text" :value="dnumber1" @input="num1Input">
    </label>
    <h2>props:{{number2}}</h2>
    <h2>data:{{dnumber2}}</h2>
    <label>
      <input type="text" :value="dnumber2" @input="num2Input">
    </label>
  </div>
</template>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      num1: 0,
      num2: 1,
    },
    methods: {
      num1change(value){
        this.num1 = parseInt(value)
      },
      num2change(value){
        this.num2 = parseInt(value)
      },
    },
    components: {
      // 定义子组件cpn
      "cpn": {
        template: `#cpn`,
        props: {
          number1: Number,
          number2: Number,
        },
        data(){
          return{
            dnumber1: this.number1,
            dnumber2: this.number2,
          }
        },
        methods: {
          num1Input(event){
            // 1.将input中的value赋值到dnumber中
            this.dnumber1 = event.target.value
            // 2.为了让父组件可以修改值,需要发出一个事件
            this.$emit("num1change", this.dnumber1)
          },
          num2Input(event){
            // 1.将input中的value赋值到dnumber中
            this.dnumber2 = event.target.value
            // 2.为了让父组件可以修改值,需要发出一个事件
            this.$emit("num2change", this.dnumber2)
          }
        }
      }
    },
  })
</script>

效果如下:

六、组件访问父访问子

当我们父组件中需要使用子组件中的函数或者属性值,我们可以使用$refs,它返回的类型是Object,先看如下代码

<div id="app">
  <cpn ref="aaa"></cpn>
  <button @click="btnClick">按钮</button>
</div>
<template id="cpn">
  <div>
    我是子组件
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "hello"
    },
    methods: {
      btnClick(){
        console.log(this.$refs.aaa.name)
        this.$refs.aaa.showMessage()
      }
    },
    components: {
      "cpn": {
        template: `#cpn`,
        data(){
          return{
            name: "我是子组件的name"
          }
        },
        methods: {
          showMessage(){
            console.log("showMessage")
          }
        }
      }
    }
  })
</script>

上述代码干了如下几件事情

  • 1.创建了组件cpn,组件中定义了一个方法showMessage和属性name
  • 2.父组件中使用子组件cpn,并绑定了一个属性ref值为aaa,相当于是唯一标识
  • 3.父组件的方法btnClick需要使用子组件中的方法和属性,只需要this.$refs.aaa,这里的aaa就是上面绑定的子组件的属性
  • 4.最后使用this.$refs.aaa.name就代表使用了子组件中的name属性

到此这篇关于Vue子组件与父组件详细解析的文章就介绍到这了,更多相关Vue子组件与父组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue父组件监听子组件生命周期

    比如有父组件 Parent 和子组件 Child,如果父组件监听到子组件挂载 mounted 就做一些逻辑处理,可以通过以下写法实现: // Parent.vue <Child @mounted="doSomething"/> // Child.vue mounted() { this.$emit("mounted"); } 以上需要手动通过 $emit 触发父组件的事件,更简单的方式可以在父组件引用子组件时通过 @hook 来监听即可,如下所示: //

  • vue 子组件和父组件传值的示例

    一.子组件向父组件传值 1:子组件中(例:) 2:父组件中(例:) 二.父组件向子组件传值 1:父组件中(例:) 2:子组件中(例:) 以上就是vue 子组件和父组件传值的示例的详细内容,更多关于vue 子组件和父组件传值的资料请关注我们其它相关文章!

  • Vue父组件调用子组件函数实现

    Vue父组件调用子组件的函数 父组件通过事件调用子组件的函数.例如父组件通过 点击事件 让子组件发请求. 文章中的项目已经通过脚手架去创建. DEMO: Father.js <template> <div> <div> <son ref="son"></son> <input type="button" value="点击" @click="useSonFun"

  • 详解vue中在父组件点击按钮触发子组件的事件

    我把这个实例分为几个步骤解读: 1.父组件的button元素绑定click事件,该事件指向notify方法 2.给子组件注册一个ref="child" 3.父组件的notify的方法在处理时,使用了$refs.child把事件传递给子组件的parentMsg方法,同时携带着父组件中的参数msg  4.子组件接收到父组件的事件后,调用了parentMsg方法,把接收到的msg放到message数组中 父组件 <template> <div id="app&qu

  • vue通过子组件修改父组件prop的多种实现方式

    目录 前言 常用方式 1. 通过父组件on监听子组件emit事件实现修改prop 2. 通过父组件sync修饰符 + 子组件emit事件实现修改prop 取巧方式 3.通过data实现修改prop 4.通过计算属性computed实现修改prop 前言 实际工作项目开发中,很经常会有父组件先传递值给子组件,再由子组件渲染展示的场景,下面我总结一下目前工作中遇到和用过的一些方式,也算是给大家一个实现方式和思路参考,如有理解不对or有其他方法欢迎在评论区留言指导- 常用方式 推荐,遵循prop单向传

  • Vue父组件如何获取子组件中的变量

    在vue项目日常开发中,难免要把功能性组件抽离出来,这样结构就会出现父子组价,兄弟组件等,但是这样就会涉及到不同组件需要互相使用其中的值得问题. 之前有说过通过ref来让父组件操作子组件,并且传值,那么我们今天来详细看看. 案例一:点击父组件的按钮,操作子组件显示 注:可以通过获取id/class来操作,这里我就不介绍这种方法了,至于jquery的话,在vue中还是慎用. 介绍:这里通过给子组件绑定ref属性,引号命名自定义,然后父组件通过 this.$refs.名字 就可以操作子组件的元素,以

  • Vue中父组件向子组件传递数据的几种方法

    最近在学习vue的源码,总结了几种vue中父子组件传递数据的方法. 1.props & event 父组件向子组件传递props数据,子组件通过触发事件向父组件回传数据,代码如下: //子组件 <template> <div @click="changeName('YYY')">{{name}}</div> </template> <script> export default{ props:['name'],//or

  • Vue子组件调用父组件方法案例详解

    一.直接在子组件中通过this.$parent.event来调用父组件的方法 <!-- 父组件 --> <template> <div> <child></child> </div> </template> <script> import child from '~/components/dam/child'; export default { components: { child }, methods: {

  • Vue子组件与父组件详细解析

    目录 一.父组件和子组件 二.模板分离写法 1.template标签 2.text/x-template 三.父子组件通信-父传子 1.Prop 类型 四.父子组件通信子传父 1.vm.$emit( eventName, [-args] ) 五.父子组件通信-结合双向绑定案例 1.基本模板代码 2.增加双向绑定 3.反向绑定 六.组件访问父访问子 一.父组件和子组件 我们经常分不清什么是父组件,什么是子组件.现在来简单总结下:我们将某段代码封装成一个组件,而这个组件又在另一个组件中引入,而引入该

  • vue.js diff算法原理详细解析

    目录 diff算法的概念 虚拟Dom h函数 diff对比规则 patch patchVnode updateChildren 总结 diff算法的概念 diff算法可以看作是一种对比算法,对比的对象是新旧虚拟Dom.顾名思义,diff算法可以找到新旧虚拟Dom之间的差异,但diff算法中其实并不是只有对比虚拟Dom,还有根据对比后的结果更新真实Dom. 虚拟Dom 上面的概念我们提到了虚拟Dom,相信大家对这个名词并不陌生,下面为大家解释一下虚拟Dom的概念,以及diff算法中为什么要对比虚拟

  • 详解vue.js2.0父组件点击触发子组件方法

    之前关于vue.js2.0父组件的一点学习,最近需要回顾,就顺便发到随笔上了 <body> <div id="counter-event-example"> <p>{{ total }}</p> <button-counter v-on:ee="incrementTotal"></button-counter> <button-counter v-on:ee="increment

  • Vue子组件向父组件通信与父组件调用子组件中的方法

    子组件向父组件通信 子组件的button按钮绑定点击事件,事件方法名为sendToParent(), 该方法在子组件的methods中声明,实现功能this.$emit('cus-event',this.msg); 在父组件引入子组件,并给cus-event事件绑定doAction($event)方法,该方法中this.msg = e;console.log(e), 而msg已经在data中声明,其值为"子级消息",故最终的输出结果为: 展示父级接收到的消息:子级消息 父组件调用子组件

  • vue.js实例对象+组件树的详细介绍

    vue的实例对象 首先用js的new关键字实例化一个vue el: vue组件或对象装载在页面的位置,可通过id或class或标签名 template: 装载的内容.HTML代码/包含指令或者其他组件的HTML片段,template将是我们使用的模板 **data:** 数据通过data引入到组件中 在组件中的data要以函数的形式返回数据,当不同的界面用了同一个组件时,才不会以为一个组件的值发生改变而改变其他页面的内容. {{ }} 双括号语法里面放入数据的变量 组件注册语法糖 全局组件 A方

  • Vue组件层级关系详细分析

    目录 前言 一.全局组件的层级关系 二.局部组件的层级关系 前言 在这之前,我们已经了解到了vue的组件有哪一些以及这些组件有什么作用,关于组件的博客,大家可以看本博主的往期文章:传送门 可以关注更多的博文进行学习了解.好的,我们进入今天的主题,我们知道组件可以进行调用,网页也可以通过分割的方式在页面中进行嵌套,并且可以在组件层级形成父级和子级.兄弟级别的关系,使得网页开发更加的富有层次感. 一.全局组件的层级关系 全局组件之间的层级关系是在vue进行代码程序执行调用的时候才确定的.我们可以通过

  • Vue父子组件通信全面详细介绍

    目录 1.Vue父子组件通信方式 2.不同文件间的通信方式 1 .父组件vue文件和子组件vue文件 2 .父组件jsx文件和子组件vue文件 3 .父组件vue文件和子组件jsx文件 4 .父组件jsx文件和子组件jsx文件 3.如何实现 1.Vue父子组件通信方式 父子组件通信方式一般为props和emit组合使用,那么在不同的文件中应该如何使用呢? |.vue文件和.jsx文件中有什么不同吗? 2.不同文件间的通信方式 1 .父组件vue文件和子组件vue文件 // 父组件 App.vue

  • vue子父组件通信的实现代码

    之前在用vue写子父组件通信的时候,老是遇到问题!!! 子组件传值给父组件: 子组件:通过emit方法给父组件传值,这里的upparent是父组件要定义的方法 模板: <div v-on:click="switchViewBtn">切换视图</div> 在data中定义:switchStatus = true; 方法: switchViewBtn(){ let that=this; this.$emit("parentView",that.s

  • Vue如何实现组件的源码解析

    官网上关于组件继承分为两大类,全局组件和局部组件.无论哪种方式,最核心的是创建组件,然后根据场景不同注册组件. 有一点要牢记,"Vue.js 组件其实都是被扩展的 Vue 实例"! 1. 全局组件 // 方式一 var MyComponent = Vue.extend({ name: 'my-component', template: '<div>A custom component!</div>' }); Vue.component('my-component

随机推荐