Vue学习笔记(4) --传值与传引用

目录

组件嵌套

属性传值

传值和传引用

传值:

传引用:

传事件

 


组件嵌套

Vue的目录结构决定了整个工程可以以非常有序且高效的方式布置,组件嵌套就是其中非常重要的一部分。

Vue学习笔记(4) --传值与传引用_第1张图片

App.vue作为被渲染的界面,其他组件需要嵌套到该文件中:

import Vue from 'vue'
import App from './App.vue'
import './plugins/element.js'
// import Users from "@/components/Users";

Vue.config.productionTip = false;
// Vue.component("users",Users);
//注册全局的组件,一半不使用

new Vue({
  render: h => h(App),
}).$mount('#app');

可以看到在Vue实例对象中render函数作用于App对象,实例对象app,还可以使用"Vue:"#app""的方法注册。

上述代码注释使用了全局注册组件的方式,这是一种调用的方法,但是并不推荐这样使用,一般来说我们使用另一种注册的方式。



属性传值

定义在组件中的数据自然可以直接在组件的模板中引用,但是很多时候我们的数据是定义在app.vue中的,这就需要在组件中绑定"v-bind:key",然后在组件中加入props。

//App.vue


//Users.vue

推荐以上述代码方式传值,当然也可以直接写"props:["users"]"。

传值和传引用

一句话总结两者的区别,传值的时候发生的改变时不会影响其他模板中调用的该值的,传引用则会改变:

传值:

//App.vue


//header.vue

这时,如果我们点击标签,会发现头部和尾部的值变化不统一,只有头部的数据改变了。这时传值的特性。

传引用:

    
    

//Users.vue


methods:{
            deleteData() {
                this.users.pop()
            }
        }

点击标签可以发现,我们传递的两个"appUsers"时会发生同步改变的,他们会同时出栈最后一项。说明传引用时一变俱变。 

传事件

上述我们所讲传值都是从父组件传到子组件,当然也有相反的传法,在这里我们需要定义一个事件:

 methods:{
            changeData(){
                // this.data = "changed"
                this.$emit("dataChanged","updated data")
            }
        }

 在这里我们点击标签时,会触发chageData()方法,然后去发现使用dataChanged标签的事件,这时我们会去app.vue中寻找事件。

//App.vue



                    
                    

你可能感兴趣的:(Vue,学习笔记)