vue-props入门

<template><div class="hello"><h1>{{ msg }}</h1></div>
</template><script>
export default {name: 'HelloWorld',props: {msg: String}
}
</script>

这是一个HelloWorld组件，他可以在父组件中引用为<HelloWorld/>标签，props里面定义一个msg属性，则此标签里就可以有msg属性，即<HelloWorld msg="xxx"/>,msg:String;即限定msg属性为字符串类型。在父组件中用时即如下代码

<template><div id="app"><img alt="Vue logo" src="./assets/logo.png"><HelloWorld msg="Welcome to Your Vue.js App"/>//引用子组件，msg为子组件props定义（String类型）</div>
</template><script>
import HelloWorld from './components/HelloWorld.vue'//引入子组件资源export default {name: 'App',components: {HelloWorld//此处引用子组件为标签}
}
</script>

vue-props入门相关推荐

js模板字符串自定义类名_【Vue.js 入门到实战教程】07Vue 组件注册 | 基本使用和组件嵌套...
来源 | https://xueyuanjun.com/post/21929除了前面介绍的基本语法之外,Vue.js 还支持通过组件构建复杂的功能模块,组件可以称得上是 Vue.js 的灵魂,是 Vu ...
VUE—从入门到飞起（四）
目录组件组件创建方式组件中的data和methods 组件切换方式父组件向子组件传值父组件把方法传递给子组件案例:评论添加及列表显示 ref获取dom和组件 VUE-从入门到飞起(一) V ...
Vue简单入门及使用(二)---基本语法及组件使用
Vue简单入门及使用(二)---基本语法及组件使用 Vue文件解读基本语法 Vue组件使用前言:做一个有梦想的程序猿! Vue文件解读以HelloWorld.vue文件为例一个vue文件里面包 ...
Vue基础入门(二）
Vue基础入门目录一.过滤器vue3已经删除!!!!!! 1.什么是过滤器(Filters) 2.代码展示 3.私有过滤器和全局过滤器 4.过滤器的注意点 5.优化时间代码示例二.watch 侦听 ...
vue从入门到放弃（五）
----------------------------------------------------点击这里<专栏目录>查看更多---------------------------- ...
Vue快速入门（下）
文章目录 Vue快速入门(下)(应急用) 八.使用Axios实现异步通信(重点) 8.1 什么是Axios 8.2 第一个Axios应用程序九.表单输入绑定十.组件基础十一.Vue-cli搭建d ...
vue router 入门笔记
vue router 入门笔记 tips: components优先级大于component,即当一个route对象里同时配置了component和components时component视为无效即 ...
vue——props的两种常用方法
vue--props的两种常用方法 1.实现父-->子的通信举例如下: 父组件 parent.vue <children :channel="object1"> ...
VUE—从入门到飞起（五）
目录路由路由基本使用路由规则中定义参数路由嵌套命名视图实现经典布局 VUE-从入门到飞起(一) VUE-从入门到飞起(二) VUE-从入门到飞起(三) VUE-从入门到飞起(四) VUE-从 ...
VUE—从入门到飞起（三）
目录动画显示隐藏(不使用动画) 使用过渡类名使用第三方类animate.css实现动画使用钩子函数模拟小球半场动画列表动画 VUE-从入门到飞起(一) VUE-从入门到飞起(二) VUE-从 ...

vue-props入门

vue-props入门相关推荐

最新文章

热门文章