Vue的组件及传参

目录

Vue的组件及传参

Vue组件的概念

我们首先要知道组件的概念,实际上每一个组件都是一个vue实例,也就是我们之前所生成的new Vue({}),组件有以下几个特点:

  1. 每个组件要有自己的template模板,根组件的模板就是我们在定义Vue的时候挂载点所在的那个大标签,
  2. 每个组件的模板只能有一个跟标签,这点很重要,就是说不管是根组件还是子组件,其模板template里面都不能包含多于一个的跟标签
  3. 子组件的数据有其自己的作用域,所以我们在定义子组件的时候要对其数据做局部化处理,以达到对组件复用之后数据独立的效果,即用data(){}来返回其数据,返回的数据应该是子组件自身绑定方法的返回值,并以字典的方式返回

根组件

上文中已经说过,根组件的定义非常简单

<script>
let app = new Vue({
        el:'#app',	//根组件的template模板其实就是挂载的这个标签的所有内容
		data:{
		msg:"根组件"
	},
})
</script>

子组件(局部组件)

子组件的定义方式就比根组件要麻烦一些,具体如下:

  1. 定义一个子组件,里面要有template模板,data数据返回,methods局部数据处理等
  2. 定义完成之后要在根组件所在的Vue里面的components写入子组件的名称,才能生效
<script>
let tag = {
        template: `		
        <div class="box">
        </div>
        `,
		//子组件的模板要自己写,写的方式是template:``,这里是两个反引号,就是键盘1左边的那个键,我们在反引号中间写自己想要呈现的组件的样式
        data () {
            return {
                num: 0
            }
        },
		//子组件要有自己的数据的局部化处理,这里就是,
        methods: {
            fn() {
                this.num ++
            }
        },
		//这里是对局部化后的数据进行操作,是独立于其余的复用组件的
    };

	new Vue({
		el: '#app',
        components: {
		    tag,
        }
		//关键字为components,子组件在定义完成之后需要在根组件所在的new Vue里面的cmponents里面写入子组件的名称.
	});
</script>

父组件向子组件传值

父组件向子组件传值的前提是,该子组件是属于该父组件的,不能向并不属于自己的子组件传值,另外,父组件向子组件传值的时候,要注意以下几点:

  1. 数据首先是在父组件里面产生的,然后才传到子组件,顺序不能反
  2. 子组件用props来接收父组件中的值,收到之后就可以在子组件里面当做一个变量来使用
<body>
    <div id="app">
        <div class="wrap">
            <tag v-for="dog in dogs" v-bind:dog="dog" :a="1" :b="2"/>
        </div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    let dogs = [{1},{2},{3}]
    let tag = {
        props: ['dog', 'a', 'b', 'z'],	
        //子组件内部通过props来接收父组件的传值,这样可以接收父组件里面存在的所有值,只要父组件有,都可以接收,如果父组件里没有,比如z,那么会取到none,也不会报错
        template: `
        <div class="box">
			<p>{{ dog }}</p>
        </div>
        `,
        data () {
            return {
                num: 0,
            }
        },
        methods: {
            fn() {
                this.num ++
            }
        },
    };
	new Vue({
		el: '#app',
        data: {
		    dogs,	
        },
        components: {
		    tag,	//这里证明tag子组件是属于父组件的
        }
	});
</script>

子组件向父组件传值

以正常逻辑来看,父组件向子组件传值比较常见,也比较符合逻辑,即我们先在父组件里面生成数据,然后子组件从里面取,逻辑没问题,所以如果反过来,子组件向父组件传值,就会存在一些问题,过程也更为繁琐,虽然可以实现,但是实际应用并不太多,因为我们总能够规避这种情况.不过还是有一些场景会用的到,所以我们要了解其具体的传参过程是怎么样的.

子组件向父组件传值的关键字是$emit,用法是要写在子组件的methods中,如下例,该实例所完成的是简单实现一个留言楼,我们可以在input框里面输入内容,点击留言,就会把我们输入的内容加入到下面的留言楼里,每条留言有一个按钮,点击就可以删除该条留言:

<body>
    <div id="app">
        <input type="text" v-model="msg">
        <button @click="send_comment">留言</button>
        <ul>
            <tag v-for="(v, i) in comments" :msg="v" :index="i" @f1="deleteMsg"/>
        </ul>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    let tag = {
        props: ['msg', 'index'],
        template: `
        <li>
            <i class="d-btn" @click="fn">x</i>
            <b>{{ msg }}</b>
        </li>
        `,
        methods: {
            fn () {
                // 点击子集，要告诉父级删除第几条数据，也就是传给父级一个index序号的值,因为留言的数组comments在父级中,所以只能由父级来删除留言
                this.$emit('f1', this.index);
                //$emit的用法,后面括号里是('父组件接收的方法','传递的数据'),也就是说由父级的f1方法来接收,而f1方法实际调用的是deleteMsg,是定义在父级的methods里面的
            }
        }
    };


    new Vue({
        el: '#app',
        data: {
            msg: '',
            comments:[],
        },
        components: {
            tag,
        },
        methods: {
            send_comment() {
                if (this.msg) {
                    this.comments.push(this.msg);
                    this.msg = '';
                }
            },
            deleteMsg(index) {
                this.comments.splice(index, 1);//这里我们用splice来切割comments数组,splice('开始位置','替换多少位','替换为什么值'),第三个如果为空,就是把前面两个参数定位的数据删除
            }
        }
    })
</script>
posted @ 2019-11-13 19:20  Xu67  阅读(259)  评论(0)  编辑  收藏  举报