vue调用组件的属性_Vue入门基础（父级组件属性传参和传引用的区别）

App.vue

//注册局部组件

//1 引入组件

import Users from './components/Users.vue'

import Header from './components/Header.vue'

import Footer from './components/Footer.vue'

export default {

name: 'app',

components: { //2 注册组件

Users,

Header,

Footer

},

data(){

return{

users:[

{name:"我是1",wechat:"1111",isshow:false},

{name:"我是2",wechat:"1111",isshow:false},

{name:"我是3",wechat:"1111",isshow:false},

{name:"我是4",wechat:"1111",isshow:false},

{name:"我是5",wechat:"1111",isshow:false},

{name:"我是6",wechat:"1111",isshow:false}

],

uname:"ERDONG",

};

}

}

h1{

color:red;

}

Users.vue

• {{val.name}}

  {{val.wechat}}

点击删除引用值

{{username}}

点击删除传值

//js 逻辑部分

export default {

//引用父级传值 第一种方式

//props:["users","username"],

//引用父级传值 第二种方式

props:{

users:{

type:Array,//指定传参类型

required:true //强制要求必须有该传参

},

username:{

}

},

name: 'users',

data() {

return {

myusers:this.users //父级的参数可以直接引用或者再赋值

};

},

methods:{

deluser(){

this.users.pop();

},

delusername(){

this.username="阿 我被删除了！！！！";

}

}

}

.users{

width: 100%;

max-width: 1200px;

margin: 40px auto;

padding: 0 20px;

box-sizing: border-box

}

ul{

display: flex;

flex-wrap: wrap;

list-style-type: none;

padding: 0

}

li{

flex-grow: 1;

flex-basis: 200px;

text-align: center;

padding: 30px;

border: 1px solid #222;

margin: 10px;

}

页面效果

点击删除引用后

点击删除传值