VUE父子组件之间的通信(简单入门案例)

一.父组件向子组件传递

这里的例子仅仅是将父组件里面定义好的数据在子组件中展示出来 , 在实际开发中 , 会先在父组件中请求后台数据 , 再将数据传到子组件中 .
在创建子组件的时候 , 有一个props属性 , 这个属性中可以定义你要在子组件中使用的变量 , 变量中的值将通过v-bind , 将父组件中的数据传入子组件


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
    <div id="app">
        <cpn v-bind:cmovies='movies' v-bind:cmes='mes'>cpn>
    div>

	
    <template id='cpn'>
        <div>
            <h2>{
    {cmes}}h2>
            <ul>
                <li v-for='item in cmovies'>{
    {item}}li>
            ul>
        div>
    template>
    
    <script>
    //创建子组件
        const cpn = {
      
            template: '#cpn',
            props: {
      
                cmovies: {
      
                    type: Array,
                    // 对象或数组默认值必须从一个工厂函数获取
                    //default() {
      
                        //return {
      
                            //movies: ['了不起的盖茨比','阿甘正传','肖申克的救赎']
                        //}
                    //},
                    //为true代表必传项
                    required: true
                },
                cmes: String
            }
        }
		
        const app = new Vue({
      
            el: "#app",
            data:{
      
                mes: 'hello',
                movies: ['了不起的盖茨比','阿甘正传','肖申克的救赎']
            },
            //引用子组件
            components:{
      
                cpn
            }
        })
    script>
body>
html>

二 . 子组件传向父组件

这是一个计数器的案例,通过点击子组件里面的按钮,改变父组件里面的值.
通常子组件向父组件传值 , 是通过父组件监听子组件通过 $emit() 发射出来的事件和值来实现
在创建子组件的时候 , 通过click事件(可以是其他事件)将自定义的事件名和变量发射出去 ,
那么在使用自定义标签的时候 , 就能使用自定义的事件名去调用父组件中定义的方法 ,
这样父组件方法就能获取到数据了


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
	
    <div id='app'>
        <h2>{
    {counter}}h2>
        <cpn @addclick='add' @subclick='sub'>cpn>
    div>

	
    <template id='temp'>
        <div>
            <button @click='addclick'>+button>
            <button @click='subclick'>-button>
        div>
    template>
    <script>
    	//创建子组件
        const cpn = {
      
            template: '#temp',
            data() {
      
                return {
      
                    num: 2
                }
            },
            methods: {
      
            	//发射事件和数据
                addclick() {
      
                    this.$emit('addclick',this.num)
                },
                subclick() {
      
                    this.$emit('subclick')
                }
            },
        }

        const app = new Vue({
      
            el: '#app',
            data() {
      
                return {
      
                    counter: 0
                }
            },
            //引入子组件
            components: {
      
                cpn
            },
            methods: {
      
                add(num){
      
                    this.counter = this.counter + num
                },
                sub(){
      
                    this.counter--
                }
            }
        })
    script>
body>
html>

你可能感兴趣的:(VUE2,入门案例,VUE,个人练习记录)