Vue组件

最新推荐文章于 2024-10-05 01:22:45 发布

深海打捞的喵

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量481

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45493444/article/details/122090267

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

组件的引用：

1.引入

需要在App.vue里面引入MyComponent

import MyComponent from “./components/MyComponent”

2.依赖注入

在components对象中，增加components注入组件

3.加载组件

在上面进行引用

所有的js必须放在export default{}中，

必要的元素必须有name属性，首字母大写，

必须有data属性，data必须是纯函数，必须存在返回值，返回值里存储状态，组件的每一次被调用都会创建一个新的组件对象

data(){

return{

}

style 有scoped属性：作用域，如果添加了此属性，则代表当前样式只能在当前组件中生效

组件的复用性

不会有互相的影响

组件的props`父传子`

在组件标签中加入，比如

:age=“20”,动态类型的prop，在MyComponent中的export default{}中添加props:[“title”,“age”]来读取，在template中添加

props的类型

<script>
props:{
	title: String,
	age: Number
},
props:{
	title: {
		type: String,
		default:"标题"//在MyComponent中没有写的话会加载这个
	}
	age: {
		type: Number,
		require: true	//动态的MyComponent标签中不能删掉 :age
	}
}
</script>

子传父$emit

在子组件中

<div>
	{{title}}
    <button @click="sendMessage">
        Send
    </button>
</div>

<script>
export default{
    name:"HelloWorld",
    props:{
    	title:{
        type:String,
        default:""
        },
    },    
    data(){
        return{
            msg:"welcome to your vue.js App"
        }
    },
    methods:{
        SendMessage(){
		/*传递两个参数，自定义事件名称，传递的参数（可以接受动态数据）*/
            		      this.$emit("onMyEvent","HelloWorld")
            /*接受对应事件和对应的值的处理,对应值可以是动态的，如this.msg*/
        }
    }
}
}
</script>

然后在父组件里面写入事件，

<HelloWorld title="hello" @onMyEvent="getMessage"/>
<!--@自定义事件="App里面的事件"-->
<div>{{current}}</div>
...
<script>
	export default{
        name:"App",
        data(){
			current:""
        },
        components:{
            HelloWorld
        },
        methods:{
            getMessage(data){
                console.log(data)//输出HelloWorld，可以接受动态数据
                this.current=data;//将接受的数据传入current
            }
        }
    }
</script>