自己のVueの最初の04日間
コンポーネントベースの開発
地方議会
<div id="app"></div>
<script></script>
复制代码図1に示すように、デフォルトのKVに等しいキーと値のペアを使用することなく、登録アセンブリ現地時間、
2、実際には、シンタックスシュガーを使用し、完全な文言が実際にあるときに、ここでは地元のアセンブリを作成
var MyFooter = Vue.extend({
template: `
<div>我是MyFooter</div>
`
})
复制代码グローバル・コンポーネント
Vue.component('MyLow', {
template: `
<div>我是MyLow</div>
`
})
new Vue({
el: '#app',
//注册局部组件
components: {
MyHeader, MyBody, MyFooter
},
template: `
<div>
<my-header></my-header>
<my-body></my-body>
<my-footer></my-footer>
<my-low></my-low>
</div>
`,
data: function () {
return {}
}
})
复制代码グローバルコンポーネント、宣言することなく使用
完全なコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件化开发</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app"></div>
<script></script>
</body>
</html>
复制代码スロットスロット、REF、親
例えばスロットの
<script></script>
复制代码親コンポーネントが存在しない場合はslot、その使用中のとき<div>我是插槽内容</div>にレンダリングされることはありません
スロットにも名を指定することができます
var Parent={
template: `
<div>我是父组件<slot name="hello"></slot></div>
`
}
new Vue({
el: '#app',
components:{
Parent
},
template: `
<div>
<parent>
<div>我是插槽内容</div>
<div slot="hello">我是插槽内容2</div>
</parent>
</div>
`,
data: function () {
return {}
}
})
</script>
复制代码指定された名前の内容がレンダリングされました
$ refを
<script></script>
复制代码$親
使用する場合に$refs得られた情報のサブコンポーネントは、
我々が使用することができ$parent、親コンポーネントに取得した情報を
var Child = {
template: `
<div>我是子组件</slot></div>
`,
created:function(){
console.log(this.$parent);
}
}
复制代码通信コンポーネント
- 親子通信コンポーネント
- 非親子通信コンポーネント
息子の父
<script>
var Child = {
//第三步：子组件使用父组件传递过来的数据
template: `
<div>我是子组件：{{sendChild}}</div>
`,
//第一步：子组件接收父组件参数的名称
props:['sendChild']
}
var Parent = {
//第二步：通过特定名称的属性，传递数据给子组件
template: `
<div>
我是父组件
<child sendChild="父组件给的"></child>
</div>
`,
components: {
Child
}
}
new Vue({
el: '#app',
components: {
Parent
},
template: `
<div>
<parent>
</parent>
</div>
`,
data: function () {
return {}
}
})
</script>
复制代码親の子伝送
非サンズコンポーネント
<script type="text/javascript">
Vue.prototype.$bus=new Vue()
var MyHeader={
template:`
<div>
我是头部
{{ headermsg }}
</div>
`,
data(){
return {
headermsg:'我是头部的信息'
}
},
created(){
// var self=this
// self.$bus.$on('sending',function(val){
// self.headermsg=val
// })
this.$bus.$on('sending',val=>{
this.headermsg=val
})
}
}
var MyBody={
template:`
<div>我是身体</div>
`,
}
var MyFooter={
template:`
<div>我是底部<button @click='sendhead'>我要跟头部通信</button></div>
`,
methods:{
sendhead(){
this.$bus.$emit('sending','我是底部的数据')
}
}
}
new Vue({
el:'#app',
components:{
MyHeader,
MyBody,
MyFooter
},
template:`
<div>
<my-header></my-header><hr>
<my-body></my-body><hr>
<my-footer></my-footer>
</div>
`,
data(){
return {}
},
})
</script>
复制代码